移动端适配的理解——REM方案

1,885 阅读3分钟
我认为,适配的目的是:写一份样式,保证可以在不同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的换算值。