DPR(设备像素比)=物理(或设备)像素/ CSS像素 ——公式(1)
上面等式成立的前提是缩放比例=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写即可。看一下具体的方法实现:
其中37.5px就来自于(2)中得到的设备相关的基准度量单位与px的换算值。