像素
1 三种像素
1.1 设备像素
设备像素(Device Pixel)也被称为物理像素,他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的。
1.2 CSS像素
CSS像素(CSS Pixel) 也被称为逻辑像素。
CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。
它是为web开发者创造的,在css或者javascript中使用的一个抽象的层,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在。
在一个标准的显示密度下(普通屏),一个CSS像素对应着一个设备像素。
1.3 设备独立像素
- 设备独立像素(Device Independent Pixel),也叫与设备无关像素。
代表可以通过程序控制使用的虚拟像素。
设备独立像素是一个总体概念,包括了CSS像素; CSS像素就设备独立像素;或者说,CSS中使用的像素是设备独立像素。
1.4 关系
- 因为设备独立像素是包含了CSS像素的大类,通常我们可以直接比较设备独立像素和设备像素之前的区别和联系。
- 在普通屏幕下 1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下,如果缩放到200%可以说1个设备独立像素 = 2个设备像素)
- 在高分屏或视网膜屏幕上,根据 ppi 不同我们可以得到不同的换算关系,一个设备独立像素可能会等于2~3个设备像素
一个 width 为 200px 的元素,它占据了 200 个 css 像素,但 200 个 css 像素占据多少个物理像素取决于屏幕的特性(是否是高密度,即像素比)和用户的缩放行为。
在苹果的视网膜屏幕上,视网膜的像素密度是普通屏幕的两倍,这个元素就跨越了400个设备像素,如果用户放大,它将跨越更多的设备像素
2 设备像素比
设备像素比 (devicePixelRatio) 简称 DPR ,有些地方也会成为缩放因子; 它的官方的定义为:设备物理像素和设备独立像素的比例。
计算公式:
DPR = 物理像素 /独立像素
JavaScript中获取屏幕的DPR:
window.devicePixelRatio //可以得到屏幕像素比
各iphone版本 屏幕参数比较:
设备 | 屏幕大小(英寸) | 物理分辨率(px) | 逻辑分辨率(px) | 像素密度(ppi) | 像素比(dpr) |
---|---|---|---|---|---|
2G/3/3GS | 3.5 | 320 x 480 | 320 x 480 | 163 ppi | 1 dpr |
4/4s | 3.5 | 640 x 960 | 320 x 480 | 326 ppi | 2 dpr |
5/5c/5s/SE | 4.0 | 640 x 1136 | 320 x 568 | 326 ppi | 2 dpr |
6/6s/7/8 | 4.7 | 750 x 1334 | 375 x 667 | 326 ppi | 2 dpr |
6p/6sp/7p/8p | 5.5 | 1242 x 2208 | 414 x 736 | 401 ppi | 3 dpr |
x/xs | 5.8 | 1125 x 2436 | 375 x 812 | 401 ppi | 3 dpr |
xr | 6.1 | 828 x 1792 | 414 x 896 | 326 ppi | 2 dpr |
xsMax | 6.5 | 1242 * 2688 | 414 x 896 | 401 ppi | 3 dpr |
当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素;
当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素;
当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素。
3 Retina屏幕 或 高清屏幕
通常,我们把 DPR 大于 1 的屏幕成为高清屏, 苹果称为 Retina屏幕
4 位图像素
- 一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元
- 1 个位图像素对应于1个物理像素,图片才能得到完美清晰的展示