移动端配适

媒体查询（响应式）

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

link 标签中的 css 媒体查询：

    // 当屏幕大于 400px 并且小于 1000px 时，引用 style1.css 样式表复制代码

html 中的 css 媒体查询：

// 当屏幕大于 400px 并且小于 1000px 时，body 的背景色为红色复制代码

meta viewport

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

    复制代码

• 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

     复制代码

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

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

font-size: 16px; border: 1px solid red; width: 0.5rem;复制代码