移动端适配的理解—

我认为，适配的目的是：写一份样式，保证可以在不同DPR的移动端设备上都能友好的展示。更形象一点的例子：假设写css单位是some-unit，简称SU，一个div宽度width设为100SU，希望达到的效果是，用尺子丈量，在不同设备width占据屏幕宽的百分比是一样的。

DPR（设备像素比）=物理（或设备）像素/ CSS像素 ——公式（1）

注意：一个CSS像素对应多少个物理像素是根据当前的缩放比例来决定（1css像素 = 缩放比例*dpr个设备像素）

上面等式成立的前提是缩放比例=1，即html中设置<mata "name=viewport" content="width=device-width,init-scale=1,min-scale=1,max-scale=1">

满足上述条件下，对于DPR为n的任一设备，1个css像素=n个物理像素。其中css像素，就是我们在css中书写的px（或浏览器Element状态栏查看元素时大小时看到的px，后面均用px代替），物理像素就是设备显示屏上最小、最原子的单位（后面均用PHYSICS_PX代替）。

下面以Iphone6和Iphone6s作为参考，简单介绍下，怎么实现适配：

Iphone6 dpi=2 逻辑分辨率：375（css像素）*667 设备分辨率：750*1334

Iphone6s dpi=3 逻辑分辨率： 414(css像素)*736 设备分辨率：1242*2208

（1）设置min-scale=1/DPR，目的是使得1px=1PHYSICS_PX。

则默认情况下，设备显示屏水平包含的css像素数量=设备分辨率，即：

Iphone6 屏幕宽 750px

Iphone6s 屏幕宽 1242px

（2）使用REM作为度量单位

设屏幕宽为20REM（可以根据喜好设置，不固定的，基准可以自己定义的），即width=20REM就是满屏的宽度。

Iphone6 要满足 20REM= 750px ，计算得1REM= 37.5px，为此设备的基准度量单位

Iphone6s 要满足20REM=1242px，计算得1REM = 41.2px，为此设备的基准度量单位

（3）只需要设置标签html的font-size为对应的1REM基准值即可

其他设备也按上述方式计算得到基准度值，这样1REM等于屏幕宽度的1/20。到时候根据任一设计稿尺寸，以750*1334为例，在css中换算成REM即可。

比如 37.5px——> 1rem 14px——> 0.37333rem

（4）前端构建优化

我们自己写css，每次都需要将px换算成rem，会比较麻烦你，前端构建时，可以采用一些构建工具，webpack中比较常用的px2rem-loader（基于SCSS工程），会把px主动换算成rem，因此我们在写css时，只需要按px写即可。看一下具体的方法实现：

@function px2rem($px){

$rem : 37.5px;

@return ($px/$rem) + rem;

}

其中37.5px就来自于（2）中得到的设备相关的基准度量单位与px的换算值。

转载于:https://juejin.im/post/5d42afb9e51d4562043f5686