移动web开发----像素知识

时间:2024-03-15 10:41:58

Pixel

iPhone5对外宣称的640*1136是指它的物理像素,而我们实际开发中用的px是指逻辑像素

px:
css pixels逻辑像素,浏览器使用的抽象单位,可以根据不同的设备和关系变大变小的。

dp,pt:
device independent pixels设备无关像素,就是说我这个设备的物理像素是固定的,不像抽象像素那样可大可小,它在物理世界这么大就这么大。它们两者的关系是通过dpr来计算的。

dpr:
devicePixelRatio 设备像素缩放比。

计算公式是:1px = (dpr)²*dp

为什么iPhone5是320px*568px? 因为它的 dpr = 2
移动web开发----像素知识
也就是
在平面上:1px = 2² *dp ,一个css像素等于四个物理像素;
在纬度上:1px = 2*dp , 一个css像素等于两个dp的长度。因此640dp *1136dp = 320px * 568px

继续哈。。。

DPI:
打印机每英寸可以喷的墨汁点(印刷行业)
PPI:
屏幕每英寸的像素数量,即单位英寸内的像素密度
计算公式:以iPhone5为例,iPhone5大小是4英寸。
ppi = √1136²+640² /4 = 326 ppi (视网膜Retina屏)
*

注意:在计算ppi的时候要用物理像素去计算而不是px

PPI越高,像素数就会越高,图像就会越清晰
移动web开发----像素知识
但可视度越低(小),系统默认设置缩放比越大。
移动web开发----像素知识
Retina屏(高清屏):dpr都是大于等于2。
iPhone6 plus dpr 等于 3
dpr会产生系统默认缩放比,比如,iPhone5的ppi是326ppi所以对应的dpr是2.0
移动web开发----像素知识