首页 > 代码库 > 我像素的理解
我像素的理解
1.设备独立像素(device-independent pixels (dips))设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。所以说,物理像素和设备独立像素之间存在着一定的对应关系
。
不管是移动端还是PC端通过screen.width/height 获取的这个值是设备独立像素(CSS 像素),而不是设备的屏幕分辨率,因为设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的,是完全透明的。
2.物理像素是构成整个屏幕的基础组件,也是最小物理单位,1个独立像素可由多个物理像素构成,如2*2个,3*3个等。
3.设备像素比(devicePixelRatio
)是组成一个独立像素的物理像素数(即线长如横向、纵向、对角线);或者说线长(横向、纵向、对角线)上的物理像素数与设备独立像素数的对应关系。在javascript中,可以通过window.devicePixelRatio
获取到当前设备的dpr。
在css中,可以通过-webkit-device-pixel-ratio
,-webkit-min-device-pixel-ratio
和 -webkit-max-device-pixel-ratio
进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
4.分辨率:日常所说的“这张图片的尺寸(或分辨率)是100x100像素”,一般都是在描述数字图片,这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图,我们习惯于说,第1张图的分辨率是1x1像素,第5张图的分辨率是20x20像素,其实只是说明了图片的像素数而已。
我像素的理解