1. 挪动端
1) meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 布局视口 (viewport)：css 作用的视口，默认值宽为 980px
- 可视视口：设施宽度所对应的范畴
-
完满视口: 布局视口 = 可视视口
- initial-scale (初始缩放比例) 1 不缩放
- minimum-scale：容许用户缩放到的最小比例（默认设置为 1.0）
- maximum-scale：容许用户缩放到的最大比例（默认设置为 1.0）
- user-scalable：用户是否能够手动缩放（默认设置为 no，因为咱们不心愿用户放大放大页面）
2）挪动端参数
1）物理像素 (ps 量取出来的值) 2px
2）逻辑像素 (css 设置的值) 1px
3）dpr(逻辑像素比) = 物理像素 / 逻辑像素
- 320 设计图 dpr = 1;
- 640/750 设计图 dpr = 2;
- 750 设计图 dpr = 3；
留神 ：因为挪动端 iphone4 及之后，呈现了超视网膜高清屏 (Retia 屏)，导致通过 ps 量取出来的值和真正要设置的值不统一，就产生 dpr
3）挪动端单位
- em: 1em 默认是 16px; 字体大小设置 em, 参考的是父元素的字体大小, 如果是其余属性设置 em 单位的话, 是参考的以后元素的字体大小
- rem: 1rem 默认值 16px; 所有设置 rem 单位的属性, 都是参考根元素 html 的字体大小
- vw(视口宽)/vh(视口的高) 100vw = 100% 视口宽
4）挪动端筹备工作（重点）
（1）设置 meta 的 viewport 标签
（2）依据设计图大小，判断 dpr 的值，依据 ps 量取的值和 dpr 的值，计算出对应的 css 像素，能够间接在 ps 中依据 dpr 批改图像大小, 图像 -》图像大小（设置宽即可，高会等比例缩放）
（3）依据设计图的宽, 计算出根元素的字体大小
比方：设计图大小为 750px; 设施宽度为 375px; 则 100vw = 375px; 1rem = 100px;
推导出：1rem = 26.667vw，vw 会追随设施宽去变动, 设置到根元素身上, 应用到 rem 单位的元素就会追随根元素去变动
html{font-size:26.667vw;}（4）重置 body 的字体大小 body{font-size:16px}
（5）失常量取设计图, 失常设置像素单位, 整体写完之后, 选中 css 代码 , alt+ z 转换成 rem 单位