移动端配适与掌握动态 REM

移动端配适

媒体查询（响应式）

media query：自动探测屏幕类型及宽度，符合条件时加载 css 样式。

link 标签中的 css 媒体查询：

<link rel="stylesheet" href="style1.css" media="(min-width: 400px) and (max-width: 1000px)">
// 当屏幕大于 400px 并且小于 1000px 时，引用 style1.css 样式表

html 中的 css 媒体查询：

<script>
    @media( min-width: 400px and max-width: 800px){
        body{
         background: red;
        }
    }
</script>
// 当屏幕大于 400px 并且小于 1000px 时，body 的背景色为红色

meta viewport

开发移动端界面时，一定要加这句代码：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• viewport：视口，浏览器可视区域宽度和高度；
• width=device-width: 默认网页宽度等于屏幕宽度；
• user-scalable=no: 禁止用户缩放；
• initial-scale=1.0: 原始缩放比例为 1.0；
• maximum-scale=1.0: 最大缩放比例为 1.0；
• minimum-scale=1.0: 最小缩放比例为 1.0。

移动端特点

• 没有 hover 伪类
• 有 touch 事件
• 没有 resize 属性
• 没有滚动条

动态 REM

REM

在 css 中有很多长度单位，比如：

• px 表示一个像素点；
• em 表示元素的font-size的计算值（一个M的宽度）；
• vh 视口高度的 1/100；
• vw 视口宽度的 1/100。

rem 也是一个长度单位，这个单位代表根元素（html）的 font-size 的大小。

em 和 rem 的区别：em 取自己的 font-size 计算值，rem 取根元素的 font-size 计算值。

网页上的字体大小默认是 16px。

移动端方案的特点

• 所有手机显示的界面都是一样的，只是大小不同
• 1 rem == html font-size == viewport width

使用 JS 动态调整 REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>

上面代码，将根元素的 font-size 设置为设备宽度。写页面的时候，直接使用 rem 单位作为长度单位，便可以实现自适应布局。

REM 可以与其他单位同时存在

 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;