关于css:day18-移动端

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 单位