CSS像素|物理像素|PPI|像素比

发表于 | 分类于 |

物理像素（设备像素）

物理像素也称为设备像素，指的是屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt（点）。如手机的分辨率，iPhone6分辨率是750x1334，即横向上有750个物理像素，750pt，纵向上有1334个物理像素，1334pt。

物理像素的值大小是固定的、绝对的。

CSS像素

CSS像素又叫设备独立像素、逻辑像素。是CSS中使用的一个抽象的概念，单位是px。

CSS像素值是相对的，并不是绝对的，css像素是相对于设备像素决定的。这句话是什么意思呢？请往下看。

一个CSS像素的大小不是固定的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div {
			background-color: red;
			width: 200px;
			height: 100px;
		}
	</style>
</head>

<body>
	<div></div>
</body>

</html>

这涉及到DPR像素的知识。

一般，在PC电脑设备上，一个CSS像素就对应一个设备像素，所以在PC端开发网页的时候，设计稿量出来的尺寸是多少，CSS样式就给多少像素。如下图所示👇

但是，当我把浏览器放大两倍的时候，CSS样式依旧是200x100的宽高，但是通过截图软件可以看到这时的div实际的物理像素是400x200了。即，随着浏览器屏幕放大两倍后，1个CSS像素对应了2个物理像素。

屏幕尺寸

指的是屏幕对角线的长度，单位为英寸。

1英寸（inch）=2.54厘米（cm）

屏幕尺寸 = 屏幕斜边的物理像素 / PPI

PPI 像素密度

像素密度（PPI）指的是 每英寸上像素（设备像素物理像素）的数量，和 屏幕尺寸一样，涉及到的都是物理像素

1、PPI的值越高，代表在一定尺寸的屏幕上像素数量越多，屏幕越清晰

2、它是一个定值，是一个固定的参数

3、https://www.sven.de/dpi/

4、PPI=屏幕斜边的物理像素/屏幕尺寸

5、同一尺寸下，PPI提高了一倍，那像素会提高4倍

如果ppi变为原来的2倍，那么单位面积内设备像素会变为原来的4倍，

如果ppi变为原来的4倍，那么单位面积内设备像素会变为原来的16倍，

如果ppi变为原来的8倍，那么单位面积内设备像素会变为原来的64倍，

如果ppi变为原来的n倍，那么单位面积内设备像素会变为原来的n^2倍。

但是同样的，ppi每变大为原来的n倍，物理像素会增加为原来的n^2倍,同时每个物理像素的大小会缩小为原来的1/(n^2)倍，这就导致了下图的问题，原本在普通屏（30x30）正常显示的图片（分别率30x30）在高清屏（60x60）下缩小了👇

这时，如果把图片的宽高样式变为原来的两倍大小，图片就可以铺满整个网格了，但是这时候出现了另一个新问题——图片模糊了。怎么解决问题呢？最好的办法就是将图片一开始就做成高分别率的60x60，这样一来，当它在普通屏（30x30）显示的时候会自动缩小，缩小的图片倒更清晰了；当它在高清屏(60x60)显示的时候就正好铺满。

DPR 像素比

DPR=物理像素/css像素，即一个CSS像素对应多少个物理像素。

可以通过window.devicePixelRatio 获取

1
2
3
4
iphone6
750 × 1334      设备像素，屏幕分辨率
375 × 667       css像素
2               像素比