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