首页 > 代码库 > 0520日重点: CSS像素,设备像素以及dpr

0520日重点: CSS像素,设备像素以及dpr

1、设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的

2、CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层

3.设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值

 

实际上,此时的CSS像素对应着以后要提到的理想视口,其对应的javascript属性是screen.width/screen.height

而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio

以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px

0520日重点: CSS像素,设备像素以及dpr