无需登录 数据私有 本地保存

在线像素标尺 - 测量网页元素宽高

16
0
0
0
X: 0, Y: 0 100%
测量记录 (0)
💡 在画布上按住鼠标拖动即可测量矩形区域，释放鼠标完成测量。移动鼠标查看放大镜和坐标。
常见问题与知识点
像素标尺是一种以像素(px)为单位的测量工具，主要用于测量数字图像、网页截图、UI设计稿中元素的宽度和高度。它模拟了设计软件（如Photoshop、Figma）中的标尺功能，帮助设计师和开发者快速获取界面元素的精确像素尺寸，确保设计的精准还原。
上传您的截图或设计稿，在画布上按住鼠标左键拖动即可创建一个测量矩形。释放鼠标后，矩形的宽度和高度会自动记录在测量列表中。移动鼠标时，放大镜会实时显示鼠标周围区域的放大视图，帮助您精确定位。您还可以使用预设尺寸快速创建特定大小的画布。
切换到"屏幕标尺"标签页，点击"新建标尺框"按钮，会在页面上创建一个可拖动的测量框。您可以拖动框体中间来移动它，拖动边角手柄来调整大小。框内实时显示当前的宽度和高度（像素）。这个模式适合直接在浏览器中测量网页元素。
在标准屏幕(96 DPI)下：1英寸 = 96像素，1厘米 ≈ 37.8像素，1毫米 ≈ 3.78像素。但请注意，不同屏幕的DPI不同（如Retina屏幕约为192 DPI），实际物理尺寸会有所差异。对于UI设计和网页开发，通常直接使用像素作为单位。
当鼠标在画布上移动时，放大镜会自动显示。放大镜以3倍放大显示鼠标周围区域，中心带有十字准线，帮助您精确识别像素边界。放大镜仅在图片测量模式下可用，移动端会自动隐藏以节省屏幕空间。
为确保准确性：① 使用放大镜精确定位测量起点和终点；② 上传原始分辨率的截图，避免缩放导致的精度损失；③ 测量结果中的W代表水平距离，H代表垂直距离，D代表对角线距离；④ 所有测量基于画布的实际像素，标尺刻度对应精确的像素位置。
支持所有主流图片格式：PNG、JPG/JPEG、GIF、WebP、SVG、BMP等。建议使用PNG或JPG格式的截图。图片最大支持4096×4096像素，文件大小建议不超过20MB。上传超大图片时，画布会自动调整，您可以通过滚动查看完整图片。
🔧 相关工具