在线测量屏幕像素：设计走查和 QA 截图怎么量更准
很多人搜“在线屏幕标尺”时，真正想做的通常是两件事：
- 测量截图里两个点之间的距离。
- 给图片标注宽度、高度或间距，再发给同事或客户。
这两件事都可以在浏览器里完成，不一定要安装桌面屏幕尺或 Chrome 插件。比较稳的流程是：先截图，再把截图放进图片测量工具，画一条标尺线，最后导出带标注的图片。
什么场景适合用在线屏幕标尺？
这些情况很适合用浏览器标尺：
- 测量 UI 截图里的间距
- 设计走查时标注按钮或卡片宽度
- 给商品图片加尺寸说明
- QA 报告里说明视觉 bug
- 客服工单里解释图片排版问题
尤其是要把结果发给别人时，带标注的截图比一句“这里间距有点大”清楚得多。
用截图测量像素的步骤
- 截取需要测量的区域。
- 在图片测量工具里打开截图。
- 从起点拖到终点，画出测量线。
- 给线条加上像素值、说明或真实尺寸。
- 导出带标注的图片，发到工单、聊天或文档里。
如果测的是 UI 间距，尽量保持和问题发生时一致的浏览器缩放。截图来自 Retina 或 HiDPI 屏幕时，也要注意图片像素和 CSS 像素可能不是同一个数。
图片像素和 CSS 像素不是一回事
现代屏幕可能用多个物理像素显示一个 CSS 像素。MDN 对 window.devicePixelRatio 的说明是：它表示当前显示设备上物理像素与 CSS 像素之间的比例。
这会带来几个影响：
- Retina 或 HiDPI 屏幕截图可能是 CSS 布局尺寸的 2 倍。
- 浏览器缩放会影响你看到的尺寸关系。
- 设计师说的是 CSS 像素，而截图文件里保存的是图片像素。
所以在 bug 报告里最好写清楚：“这是按截图像素测的”还是“期望间距是 24 CSS px”。
隐私内容建议本地测量
如果图片里有客户信息、账号页面、未发布商品图或内部看板，不建议上传到第三方测量工具。优先使用浏览器本地处理的工具，让图片留在自己的设备上。
BaseToolbox 的图片尺寸标注工具用于浏览器本地标注，适合快速做视觉 QA、商品图反馈和客服截图说明。
常见测量错误
测了被缩小的预览图
如果网页把截图缩小显示，直接量预览图会得到错误尺寸。能下载原图时，优先打开原图再测。
混淆 CSS 像素和图片像素
前端开发通常关心 CSS 像素；图片标注工具测到的可能是截图位图本身。如果截图是 2x 密度，48 个图片像素可能对应 24 个 CSS 像素。
忘记浏览器缩放
浏览器缩放会影响视觉检查。涉及精确间距时，建议记录缩放比例和设备像素比。
只在文字里描述尺寸
把测量结果直接标在图上。收到截图的人应该一眼看出你在说哪个间距或哪个物体。
一句话总结
在线测量屏幕像素，最稳的方法是先截图，再用浏览器图片标尺画线标注并导出。做 UI 问题反馈时，要说明测到的是截图像素还是 CSS 像素，尤其是在 Retina 和 HiDPI 屏幕上。
实用流程
先确定你要量什么：原图像素、CSS 显示尺寸、截图里的间距，还是商品参考尺寸。这些不是同一个问题。上传或截图后，把图缩放到舒服的比例，从稳定边缘开始量，不要拿阴影、抗锯齿边缘或圆角过渡当唯一参考。
做设计走查时，建议同时记录测量值、期望值和视口大小。桌面截图里的 24px 间距，在移动端、Retina 屏、浏览器缩放或截图压缩后，可能不是同一个概念。
检查清单
| 检查项 | 为什么重要 | |---|---| | 原始像素 | 底层图片可能比页面显示尺寸大。 | | 浏览器缩放 | 缩放会改变你看到的大小。 | | 参考点 | 阴影和圆角会让测量不稳定。 | | 设备倍率 | Retina 截图和 CSS 像素可能相差 2 倍或 3 倍。 |
常见问题
为什么两个工具测出来不一样？
它们可能测的是不同坐标系：源图片像素、CSS 像素、设备像素或缩放预览。比较前要先确认口径。
使用场景示例
做 UI QA 时，除了测量值，还应记录视口、浏览器缩放和期望 CSS 值。量商品图时，应使用已知参考线，而不是凭图片边缘猜尺寸。
测量结果只有在别人可以复现时才有意义，所以要把口径写清楚。
参考资料：