使用方法

1. 在标尺上点击拖动以测量距离。标尺以像素为单位显示刻度。
2. 起点和终点可移动 · 抓住它们以调整测量。
3. 启用垂直模式可测量垂直距离而非水平距离。
4. 在标尺下方查看像素数和估算的物理尺寸。

常见问题

物理尺寸的计算有多准确？

物理尺寸基于您设备的像素比和假定的 96 DPI。实际显示器 DPI 各不相同，因此这只是一个近似值。若需对印刷文档进行精确测量，请使用物理标尺。

可以测量垂直距离吗？

可以。启用垂直模式以测量垂直像素距离，而非水平距离。

设备像素比是什么意思？

高密度显示屏（如 Retina 屏幕）的像素比大于 1，意味着多个物理像素代表一个 CSS 像素。此工具以 CSS 像素为单位测量。

这个标尺测量什么（以及不能测量什么）

这是一个居住在浏览器标签页内的自由拖拽测量工具。在上方画布上拖动即可获得CSS像素读数。它适用于浏览器视口内绘制的任何内容（在标签页中打开的截图、内嵌查看的Figma导出文件、第二个标签页中的实时网页），但无法测量桌面窗口、原生应用UI、任务栏，或操作系统级合成器在浏览器外绘制的任何内容。它也无法像Chrome DevTools或Page Ruler Redux那样自动检测元素边界，那是另一类工具。坦诚地说：当您想要在浏览器内进行快速、无需安装的测量时，这个标尺正是合适的选择。

CSS像素不等于硬件点

JavaScript和CSS使用的像素是W3C定义的参考像素：「设备像素密度为96 dpi、读者与设备距离约一臂之遥时，一个像素的视角。」对于约28英寸的标称臂长，该视角约为0.0213°，或屏幕表面约0.26毫米。CSS像素是视角的单位，而非硬件点，设计上与设备无关，使16 px字体在手机、笔记本电脑和电视上呈现大致相同的物理尺寸。

所有其他绝对CSS长度都以它为基准：1in = 2.54cm = 96px、1mm ≈ 3.78px、1pt ≈ 1.333px。这个固定的换算表正是使「96 DPI下的毫米」读数成为估算而非真实测量值的原因，见下文。

设计师常混淆的三种像素概念

术语	计量对象	所在位置
CSS像素	W3C参考像素；JS和CSS用于布局的单位	window.innerWidth、getBoundingClientRect()、所有CSS长度
设备像素	面板上实际可寻址的点	screen.width × devicePixelRatio，显示器的原生分辨率
图像像素	光栅文件的固有分辨率	naturalWidth / naturalHeight 属性，位于 <img> 上

一句话概括关系：屏幕物理分辨率 ≈ CSS视口尺寸 × 设备像素比，且清晰图像需要固有宽度 ≥ 渲染CSS宽度 × DPR。一个在DPR为3的手机上CSS尺寸为100 px的logo，需要至少300像素宽的源图像才能清晰显示。

设备像素比

信息面板中的DPR读数报告 window.devicePixelRatio：「当前显示设备中物理像素分辨率与CSS像素分辨率之比。」常见值：

• 1.0：经典96 DPI显示器（老式显示器、Windows机器在100%缩放时）。
• 2.0：大多数Retina MacBook，许多4K显示器在200%缩放时。
• 2.5-3.5：现代手机。iPhone Pro机型报告3.0；Android旗舰机型通常为2.625 / 2.75 / 3.5。

值得了解的两个行为：页面缩放（Ctrl/Cmd + 和 −）确实会改变DPR，因此缩放时读数会变化。捏合缩放在不改变底层CSS像素大小的情况下放大渲染视口，因此不会改变DPR。Apple于2010年在iPhone 4上推出了Retina显示屏，为了防止现有应用和页面在设备像素两个维度均翻倍时缩小到原来的四分之一，iOS引入了「点」（其CSS像素的等效概念）。Web继承了相同的模型：2×的CSS像素对应四个设备像素。

触摸目标尺寸标准

像素标尺最有用的功能之一是验证按钮、链接和图标是否符合无障碍触摸目标最小值。通常会同时出现三个标准：

来源	最小值	单位	~实际尺寸（96 DPI）
WCAG 2.2 SC 2.5.8 AA	24 × 24	CSS px	~6.4 × 6.4 mm
WCAG 2.5.5 AAA	44 × 44	CSS px	~11.6 × 11.6 mm
Apple HIG	44 × 44	pt	~11.6 × 11.6 mm
Material Design / Android	48 × 48	dp	~9 毫米（160 dpi 参考值）

WCAG 2.2于2023年10月新增了24 × 24 AA标准。W3C一致性测试的表述为：「在概念上必须可以在目标内绘制一个24像素见方的实心正方形…完全位于目标范围内。」共有五项例外情况（间距、等效、行内、用户代理控制、必要情况），但总体而言，正文UI需要达到该标准。旧的AAA标准（2.5.5）要求44 × 44，与Apple的HIG相符，也与Material的48 dp大致相当。

8像素设计网格

大多数现代UI设计基于8像素基本单位（「8点网格」或「8 dp网格」，取决于平台）。Material Design 2和3均以此为基础，图标和密集组件采用4 dp的微调。选择8并非偶然：它能整除常见屏幕宽度（320、360、375、1280、1440），以整数倍缩放（8、16、24、32、40、48），并与16 px默认正文字号自然搭配。4像素子网格处理精细对齐。

实践应用：当您测量到一个间距为14 px或17 px时，很可能发现了CSS单位错误，预期值几乎肯定是16。像素标尺是发现偏离网格间距的最快方法。

何时会用到浏览器标尺

• 已上线页面的设计QA。将实际结果与规范对比。两张卡片之间的间距是16 px还是24 px？
• 触摸目标验证。将标尺拖过按钮，确认其满足AA 24 px下限或AAA 44 px目标。
• 粘贴模型的间距审计。在标签页中打开Figma导出文件，拖动标尺，检查节奏感。
• 响应式断点完整性检查。视口宽度读数在您调整窗口大小时同时充当实时断点指示器。
• 教学演示。向初级开发者展示 devicePixelRatio 在其设备上的报告值，以及当他们按Cmd/Ctrl + 缩放时它如何变化。
• 无障碍审计。验证图标按钮点击区域、CSS像素下的行长，以及最小文字尺寸。

浏览器开发者工具及其他标尺

每个现代浏览器都内置了测量工具，但隐藏在开发者面板后面。

• Chrome DevTools：打开命令菜单（Cmd/Ctrl+Shift+P），输入 「rulers」，选择悬停时显示标尺。将鼠标悬停在元素上时，标尺会出现在视口的顶部和左侧。该功能与元素选择绑定，而非自由拖拽。
• Firefox DevTools：设置 → 可用工具箱按钮 → 启用为页面切换标尺。DevTools工具栏中出现一个标尺切换按钮；标尺覆盖在页面边缘，右上角显示视口尺寸。
• Figma / Sketch / Adobe XD：均在其画布内置标尺覆盖层。Figma使用Shift+R切换。这些工具与文件绑定：它们在自身的文档模型内测量，而非已部署的网页。
• 浏览器扩展：Page Ruler Redux、MeasureIt、PixelZoomer、Dimensions。所有这些都需要安装和权限；均限于浏览器内使用。如需元素自动检测，这些工具很有用。

像这样的浏览器标签页标尺适合不想打开DevTools面板或安装扩展的设计师、QA审阅者和内容人员，只需单击即可使用。

更多问题

毫米读数有多准确？

这是一个估算值。转换使用W3C固定的1英寸 = 96 CSS像素关系，仅当您的显示器确实为96 DPI、浏览器缩放为100%且操作系统缩放为100%时才准确。实际显示器差异很大：24英寸1080p面板约为92 ppi，27英寸1440p约为109 ppi，27英寸4K约为163 ppi。将毫米数字视为数量级估算，切勿作为印刷级别的精确测量。若需真实的物理尺寸，请用实体直尺贴着屏幕量。

为何缩放时设备像素比会变化？

页面缩放（Cmd/Ctrl + 或 −）从字面上改变了CSS像素相对于设备像素的大小，因此两者之间的比率随之改变。触摸设备上的捏合缩放工作方式不同：它在不改变底层CSS像素大小的情况下放大渲染视口，因此不会移动DPR。

为何1366×768不恰好是16:9？

因为确实不是。1366 ÷ 768 = 1.7786；真正的16:9是 1.7778。化简比实际为683:384。许多廉价笔记本电脑面板使用这个略微偏离规格的分辨率，这也是为什么1080p视频有时在这些设备上缩放不完美的原因之一。

我可以在浏览器外测量吗？

不能。网页只能看到并绘制在其自身浏览器标签页内的内容。要测量桌面窗口、原生应用UI或浏览器外的任何内容，您需要操作系统级实用程序：macOS Preview的「显示检查器」、Windows截图工具的尺寸叠加层，或第三方屏幕标尺。

有任何内容会发送到服务器吗？

不会。标尺通过HTML5 Canvas API渲染；视口尺寸和DPR来自JavaScript本地计算；测量读数在您的浏览器中计算。页面加载后可离线工作。

相关工具