博主目前在蚂蚁集团-体验技术部，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。
博主水平有限，若发现文中存在问题，欢迎留言指正！
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
