首先对于一种影像设备(如液晶电视/电脑屏幕),物理像素是固定的单位,而逻辑像素是相对单位,如CSS中的px。
有个公式很重要
- DPR: 独立像素比(设备像素比)
=
分辨率(设备像素数如1920*1080) ➗ 设备独立像素数/CSS像素数(如1280*610)
这个独立设备像素一般也是每个设备固定的,在100%缩放的情况下,1个设备独立像素就等于1个CSS像素,因此每个设备的DPR可以看作是固定的。
注意:上面的除法不是乘起来除,而是1920÷1280或者1080÷610,即(在相同长度的直线上)设备像素的数量 / CSS像素的数量。
同时DPR也等价于:每个CSS像素边长 ➗ 每个设备像素边长,怎么反过来了呢,因为在尺寸不变的情况下,像素数和每个像素的边长成反比,
下面是一个简单的数据,一般来说,我们拿到的设计稿都是按照物理像素设计的,比如拿到了一张1080*1920的设计稿来适配Iphone6,设备像素比为3,说明3个设备像素才是一个css像素,因此如果设计稿上一个按钮宽度为60px,那么开发的时候给的宽度应该是60➗3 = 20px;