像素

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个物理像素,图片才能得到完美清晰的展示

results matching ""

    No results matching ""