设备独立像素DIP(逻辑像素)

设备独立像素: 也称逻辑像素,(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。

根据设备像素与CSS像素之间的关系、及DPR的官方定义,我们可以推断出:

CSS像素 = 设备独立像素 = 逻辑像素

如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为 320*480pt。因此,需要使用大约4个物理像素来显示1个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素,设计师尺寸就是物理像素。
我们平时描述一张图片宽高时一般用 200px * 100px,这里的 px 也是逻辑像素。

获取方法:

document.documentElement.clientWidth  //iphone6 => 320
document.documentElement.clientHeight  //iphone6 => 667
设备独立像素DIP(逻辑像素)_第1张图片
逻辑像素

你可能感兴趣的:(设备独立像素DIP(逻辑像素))