MeasureTool 使用教程：免费 3 步完成屏幕像素测量

MeasureTool 使用教程：免费 3 步完成屏幕像素测量

【免费下载链接】PowerToysMicrosoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows项目地址: https://gitcode.com/GitHub_Trending/po/PowerToys

PowerToys MeasureTool 是微软官方的免费屏幕测量工具。在屏幕上框一下，就能读出任意区域的像素尺寸，还能换算成毫米、厘米等物理单位。它解决的核心问题，是"这个元素到底宽 375px 还是 374px"这类靠肉眼永远说不清的测量需求。

🔍 先说个熟悉的场景

产品评审会上，设计师指着页面问：这张卡片比规范宽了几个像素？你只能截图丢进图片查看器里数，折腾五分钟，答案还不一定准。前端更常遇到：浏览器里量出的数字和设计稿对不上，差在行高还是边距，没人说得清。

这类时刻需要的是一把屏幕标尺，更准确说，是一把像素测量工具。直接在屏幕上框一下、点两点，2 秒读出数值，不用截图，也不用切换窗口。

⚡ 3 步启动 MeasureTool

1. 从微软商店安装 PowerToys，装完无需额外配置。
2. 打开 PowerToys 设置，在左侧列表找到 MeasureTool，打开开关。
3. 按默认快捷键 Win+Shift+M，屏幕定格，顶部浮出一个小工具栏，工具就位。

测量结束按 Esc，或点工具栏上的叉号退出。

📏 三种测量方式，各量各的

工具栏上 4 个按钮，对应三种测量方式。

矩形框选。点虚线方框按钮，在屏幕上拖出一个矩形。量出来的结果长这样：561 × 202，宽和高分开显示，拖拽过程中数字实时刷新。

两点距离。选中十字光标按钮，在起点、终点各点一下。标签跟着光标移动，横向、纵向、斜向三个分量同时显示，适合核对元素间的间距。

单线长度。水平线、垂直线两个按钮可以单独用。结果长这样：132 px，只有一个数字，适合只关心某一条边的长度，比如量图的宽度而不想知道高度。

👥 三类人怎么用它

UI 走查，做 UI 尺寸检查

• 框选组件，核对实际渲染尺寸和设计稿标注差几个像素
• 量两个元素之间的间距，确认是不是标准的 8px 或 16px
• 把问题区域的尺寸写进走查文档，交接给开发

网页调试

• 量 DOM 元素的实际渲染宽度，和设计值对比
• 检查布局偏移：内容整体偏左 3px，量一次就能确认
• 核对断点触发时各区域的实际宽度

打印排版

• 把像素换算成毫米，确认打印出来的实物尺寸
• 核对照片的屏幕显示大小和冲印要求是否一致
• 排版预览时量出血位和留白

⚙️ 两个最常用设置

快捷键。默认是 Win+Shift+M，在设置页的 MeasureTool 卡片里可以改成自己顺手的组合。建议保留，测量是随时要用的事。

单位切换。支持像素、英寸、厘米、毫米四种单位，在设置里选一个即可。做网页选像素，要打印就选毫米。

🩺 量出来的数不对？按这个清单查

测量值偏差

• 先确认系统显示缩放是不是 100%，125% 缩放下读数和物理尺寸会不匹配
• 用开发者工具量同一元素对比一次，确认差的是浏览器边距还是缩放
• 框选时贴着元素边缘取点，避开阴影和圆角

高 DPI / 多屏

• 毫米换算依赖当前屏幕的 DPI，接上副屏后数值变化属正常
• 高分屏上像素读数偏小，检查该显示器的缩放设置
• 跨屏对比前，先把两台显示器的缩放比例对齐

MeasureTool 只干一件事：把屏幕变成一把能读的标尺。用熟了，测量会从"打开工具折腾几分钟"变成"按一下快捷键"的事。想继续了解它，源码在项目内的 src/modules/MeasureTool/ 目录下。

【免费下载链接】PowerToysMicrosoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows项目地址: https://gitcode.com/GitHub_Trending/po/PowerToys