一文搞懂像素（px）、分辨率、CSS长度单位

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

对于做前端的朋友，相信看到像素（pixel）、分辨率（resolution）、CSS长度单位这些概念都不陌生，但是对它们之间的关系是否清楚呢？以及如何区分应用场景？本文将带你搞懂这些内容。

一、像素

像素是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或小方块（尽管可以用点或小方块来呈现），而是一个抽象概念。

不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.3mm之间。

液晶显示器点距参考表（1 英寸 = 2.54 厘米）：

尺寸	规格	点距
15.6英寸	16:9宽屏（1366×768）	0.252mm×0.252mm
17英寸	16:10宽屏（1440×900）	0.255mm×0.255mm
17英寸	5:4普屏（1280×1024）	0.264mm×0.264mm
18.5英寸	16:9宽屏（1366×768）	0.300mm×0.300mm
19英寸	16:10宽屏（1440×900）	0.285mm×0.285mm
19英寸	16:10宽屏（1680×1050）	0.244mm×0.244mm
19英寸	5:4普屏（1280×1024）	0.294mm×0.294mm
20英寸	5:4普屏（1400×1050）	0.292mm×0.292mm
20英寸	5:4普屏（1600×1200）	0.255mm×0.255mm
20英寸	16:9宽屏（1600×900）	0.276mm×0.276mm
20英寸	16:10宽屏（1680×1050）	0.258mm×0.258mm
21.5英寸	16:9宽屏（1920×1080）	0.248mm×0.248mm
21.6英寸	16:10宽屏（1680×1050）	0.276mm×0.276mm
22英寸	16:10宽屏（1680×105）	0.282mm×0.282mm
23英寸	16:9宽屏（1920×1080）	0.266mm×0.266mm
23英寸	16:9宽屏（2048×1152）	0.249mm×0.249mm
23英寸	16:10宽屏（1920×1200）	0.258mm×0.258mm
24英寸	16:9宽屏（1920×1080）	0.276mm×0.276mm
24英寸	16:10宽屏（1920×1200）	0.27mm×0.27mm
25.5英寸	16:10宽屏（1920×1200）	0.2865mm×0.2865mm
27英寸	16:10宽屏（1920×1200）	0.303mm×0.303mm
30英寸	16:10宽屏（2560×1600）	0.2505mm×0.2505mm
而打印机的墨点，也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

接下来介绍关于像素的几个概念：

设备像素： 设备的物理像素，其尺寸大小是绝对的。

逻辑像素： CSS 的像素单位，其尺寸大小是相对的，也称为独立像素。

DPI（dots per inch）： 像素密度，表示水平或垂直方向每英寸长度的像素数目。

PPI（pixels per inch）： 像素密度，表示沿对角线每英寸长度的像素数目。

缩放因子（Scale Factor）： 逻辑像素相对于设备像素的放大比例，可通过 window.devicePixelRatio 获得，但二者并不完全等同。

逻辑像素 = 设备像素 × 缩放因子

设备像素都是固定的，所以逻辑像素大小由缩放因子决定。对于桌面设备，逻辑像素通常就等同于物理像素，本来是不用考虑缩放问题的。而现在屏幕变得越来越高清，PPI 越来越大，如果没有缩放，所有的东西看起来都会比较小，因此需要放大。所以决定缩放因子大小的，就是像素密度，密度越大、越高清的屏幕，需要的缩放比例就越大。

PC 上的缩放比例是自定义的，而移动端的缩放比例是通过 viewport 确定的，viewport 就是屏幕那块固定的可视区域。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说1px = 设备屏幕宽度的1/980。这跟缩放因子没有任何关系。这时的1px 非常小，所有的元素都变得非常小，移动端浏览器之所以这么做，是为了尽可能完整的显示 PC 端的网页，然后允许用户通过缩放来查看细节。

如果我们不希望采用默认的设置，就需要人为设置 viewport：<meta name=“viewport” content=“width=device-width”>

将 viewport 宽度设为设备宽度，就跟缩放因子有关了。比如：iphone6（750 × 1334）的 PPI 是326，缩放因子是2，所以1个逻辑像素的大小等于2个设备像素。对于 iphone6，1px = 屏幕宽度的1/375，相比1/980放大了不少，而这时候的1px 就是一个比较理想的大小，即比较符合我们在 PC 端使用 px 时的感受。

二、分辨率

分辨率也叫做解析度，解像度。物理分辨率一定的情况下，显示屏越小图像越清晰；反之，显示屏大小固定时，物理分辨率越高图像越清晰。

物理分辨率 = 屏长的设备像素 × 屏宽的设备像素

通常我们所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与 CRT（阴极射线显像管）不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

如果修改为其他桌面分辨率，如：1680 × 1050，则显示桌面范围的长（均匀）分布1680个物理像素，宽（均匀）分布1050个物理像素。

三、CSS 长度单位

单位	含义
px（相对单位）	相对于桌面分辨率而不是视窗大小：通常为1个点，一般为1/96英寸
em（相对单位）	相对于父元素的字体大小，若父元素 font-size 为 16px，那么 1em 就为 16px
%（相对单位）	相对于父元素，正常情况下是通过属性定义自身或其他元素
rem（相对单位）	相对于根元素字体大小，若根元素（html）font-size 为 16px，那么 1rem 就为 16px
ex（相对单位）	相对于小写字母 “x” 的高度
vw（相对单位）	相对于视窗的宽度：视窗宽度是 100vw
vh（相对单位）	相对于视窗高度：视窗宽度是 100vh
vmin（相对单位）	vw 和 vh 中较小的那个
vmax（相对单位）	vw 和 vh 中较大的那个
ch（相对单位）	1ch 的大小和字母 o 的宽度相等
in（绝对单位）	inch，表英寸
cm（绝对单位）	centimeter，表厘米
mm（绝对单位）	millimeter，表毫米
pt（绝对单位）	磅，1/72英寸
pc（绝对单位）	12点活字，或1/12点

四、三种适配的场景

PPI适配 —— 解决在最小基本单位尺寸不固定的情况下，如何找到一个固定大小的尺寸单位的问题。
对于文字，希望 16px 的文字无论在什么样的屏幕下看起来都是一样大的。也就是说这里的 px 是一个实际物理尺寸固定的单位。
设置 viewport 就可以实现这个目的：<meta name=“viewport” content=“width=device-width”>
1个逻辑像素的尺寸 = 1 / PPI × 缩放因子，所以说设置 viewport 本质上是把 px 变成了一个“绝对单位”。
分辨率（resolution）适配 —— 解决找一个相对单位，使同一尺寸在不同大小的屏幕上看上去相对大小一致的问题。
比如一张宽100%，高100unit 的 banner 图，希望它在任何大小的屏幕上能够等比例缩放，因此需要这里的 unit 是一个相对单位。vw 和 vh 就是很好的相对单位。
DPR（devicePixelRatio）适配 —— 解决在设置了 viewport，width=device-width 的情况下，如何画出1px（设备像素）的问题。
DPR = 2 意味着 CSS 中的1px 会用2个设备像素来渲染，解决方案有：用小数、渐变、transform 缩放，手机淘宝的做法是使用 js 动态设置 viewport 的 initial-scale。

博主水平有限，若发现文中存在问题，欢迎留言指正！

学习之路永无止境！