像素尺
像素是设计师的单位——设计稿、按钮和断点的语言。像素尺统计您浏览器自身的 CSS 像素，所以完全不需要校准：切换到像素模式，用样式表相同的单位测量页面上的任何东西。
什么是 CSS 像素？
CSS 像素是浏览器的抽象单位——样式表中的 px。它刻意不是物理尺寸：在普通显示器上一个 CSS 像素对应一个物理像素，而在高密度（“Retina”）显示器上，多个物理像素会合力把一个 CSS 像素画得更锐利。这个比值就是设备像素比（DPR）。网页设计发生在 CSS 像素的世界里，而这把尺子数的正是它。
读懂像素刻度
像素模式下，小刻度每 10 px 一个，中等刻度每 50 px，带数字的大刻度每 100 px 一个。量一个按钮：把它的左边缘对准零，看右边缘落在哪里——比如刚过 120，也就是宽约 124 px。需要精确时，在两边各放一条参考线，相减得到读数。
为什么像素模式不需要校准
校准回答的是一个物理问题：“在这台显示器上，多少个 CSS 像素等于真实的一英寸？”像素模式从不问这个问题——它只统计浏览器自己的单位，页面对此了如指掌。这也是像素测量作为物理尺寸没有意义的原因：在每台显示器上，100 px 对应的毫米数都不同。做设计用像素；量现实世界用厘米/毫米/英寸（校准之后）。
像素与印刷磅值
您有时会看到“1 px = 1/96 英寸”。那是来自 CSS 的印刷惯例，为了让样式表能在纸上换算成物理单位——它与您的屏幕无关。在屏幕上，唯一诚实的说法是：CSS 像素的大小取决于显示器的密度，而校准过的尺子正是帮您搞清楚它的工具。
常用像素参照
- 典型正文字（16 px）的大写字母高度——约11 px
- 常见按钮高度——36–48 px
- 网站图标——16 × 16 px
- 全高清视口宽度——1920 px（CSS 像素，与 DPR 无关）
常见问题
像素在现实中有多大？
没有固定答案。CSS 像素没有物理尺寸——它只是按打印惯例相当于 1/96 英寸。在您的屏幕上，它的物理尺寸取决于显示器密度，这正是尺子对物理单位需要校准、而像素模式不需要的原因。
像素尺需要校准吗？
不需要。像素模式统计浏览器自身的 CSS 像素，页面无需任何物理测量就了如指掌。校准只对有真实尺寸的单位（厘米、毫米、英寸）有意义。
什么是设备像素比（DPR）？
绘制一个 CSS 像素所用的物理屏幕像素数量。DPR 为 2（Retina 显示屏）时，每个 CSS 像素由四个物理像素绘制，显示更锐利。尺子的像素模式始终显示 CSS 像素——这正是网页设计师使用的单位。