| 一文搞懂像素（px）、分辨率、CSS长度单位 | 您所在的位置：网站首页 › ps打印尺寸和实际尺寸是一个概率吗 › 一文搞懂像素（px）、分辨率、CSS长度单位 |
一文搞懂像素（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.252mm17英寸16:10宽屏（1440×900）0.255mm×0.255mm17英寸5:4普屏（1280×1024）0.264mm×0.264mm18.5英寸16:9宽屏（1366×768）0.300mm×0.300mm19英寸16:10宽屏（1440×900）0.285mm×0.285mm19英寸16:10宽屏（1680×1050）0.244mm×0.244mm19英寸5:4普屏（1280×1024）0.294mm×0.294mm20英寸5:4普屏（1400×1050）0.292mm×0.292mm20英寸5:4普屏（1600×1200）0.255mm×0.255mm20英寸16:9宽屏（1600×900）0.276mm×0.276mm20英寸16:10宽屏（1680×1050）0.258mm×0.258mm21.5英寸16:9宽屏（1920×1080）0.248mm×0.248mm21.6英寸16:10宽屏（1680×1050）0.276mm×0.276mm22英寸16:10宽屏（1680×105）0.282mm×0.282mm23英寸16:9宽屏（1920×1080）0.266mm×0.266mm23英寸16:9宽屏（2048×1152）0.249mm×0.249mm23英寸16:10宽屏（1920×1200）0.258mm×0.258mm24英寸16:9宽屏（1920×1080）0.276mm×0.276mm24英寸16:10宽屏（1920×1200）0.27mm×0.27mm25.5英寸16:10宽屏（1920×1200）0.2865mm×0.2865mm27英寸16:10宽屏（1920×1200）0.303mm×0.303mm30英寸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： 将 viewport 宽度设为设备宽度，就跟缩放因子有关了。比如：iphone6（750 × 1334）的 PPI 是326，缩放因子是2，所以1个逻辑像素的大小等于2个设备像素。对于 iphone6，1px = 屏幕宽度的1/375，相比1/980放大了不少，而这时候的1px 就是一个比较理想的大小，即比较符合我们在 PC 端使用 px 时的感受。 二、分辨率分辨率也叫做解析度，解像度。物理分辨率一定的情况下，显示屏越小图像越清晰；反之，显示屏大小固定时，物理分辨率越高图像越清晰。 物理分辨率 = 屏长的设备像素 × 屏宽的设备像素 通常我们所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与 CRT（阴极射线显像管）不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。
PPI适配 —— 解决在最小基本单位尺寸不固定的情况下，如何找到一个固定大小的尺寸单位的问题。 对于文字，希望 16px 的文字无论在什么样的屏幕下看起来都是一样大的。也就是说这里的 px 是一个实际物理尺寸固定的单位。 设置 viewport 就可以实现这个目的： 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。 博主水平有限，若发现文中存在问题，欢迎留言指正！ 学习之路永无止境！ |
设备像素 = 逻辑像素 × 缩放因子
如果修改为其他桌面分辨率，如：1680 × 1050，则显示桌面范围的长（均匀）分布1680个物理像素，宽（均匀）分布1050个物理像素。【本文地址】