移动端的一些基础知识

1

设备像素(物理像素): 可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素比,然后由相关系统转换为物理像素。

屏幕密度:是指一个设备表面上存在的像素数量
CSS像素:是一个抽象的单位,主要使用在浏览器上,用来精确度量Web页面上的内容,css像素称为与设备无关的像素
设备像素比(device pixel ratio):简称为dpr,定义了物理像素和设备独立像素的对应关系

设备像素比 = 物理像素 / 设备独立像素

在不同的屏幕上,css像素所呈现的物理尺寸是一致的,在普通屏幕下1个css像素对应1个物理像素,而在Retina屏幕下,1个css像素对应的却是4个物理像素。

在js中,用window.devicePixelRatio来获取当前设备的dpr,在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

iphone6设备宽度和高度为375 667,可以理解为设备的独立像素。他的dpr为2,所以他的物理像素为750pt1334pt

你可能感兴趣的

载入中...