1 移动端适配

1，手里有一张640px 宽的设计图

2，规定我的现在的 html 的 font-size 为20px,

也就是当前的 页面宽度=640/20=32rem

就是说在设计图上测出来的一个按钮宽度是 320px 的话，要在代码里面写 width :16rem

就按照这种换算把设计稿实现

3，在适配移动端的时候，

先设置禁止用户缩放

<meta name="viewport" content="user-scalable=no"/>

然后设置视口宽度为设备的物理宽度

<meta name="viewport" content="width=device-width"/>

设置缩放比例为1倍

<meta name="viewport" content="initial-scale=1"/>

4，接下来根据每个设备的宽度的物理像素个数、高密度屏幕的规格，来设置 rem所对应的css像素的个数

首先获取当前设备的实际物理像素，因为已经设置了视口宽度是设备实际宽度

window.innerWidth

然后和我们一开始实现页面的时候的设计稿宽度640 字体大小20 保持正比例

w/trueFontSize=640/20

得出trueFontSize,设置给Html元素

然后获取设备的高密度屏幕的像素密度dpr

window.devicePixelRatio

取值有1，2，3等

我们刚才得到的的trueFontSize 对应的是 dpr=1的情况

设置最终的trueFontSize =trueFontSize *dpr

5，如果不根据dpr来设置的话，用的都是dpr=1的时候的字体大小，那么在dpr=2的屏幕里面我们写了width=1ram的元素的宽度看上去只有dpr=1的屏幕中的一半，将字体变大一倍以后，元素宽度所占的屏幕宽度的比例刚好相等