屏幕标尺工具 - 可拖拽像素测量

屏幕标尺工具是一种在线像素测量工具，帮助你在屏幕上精确测量任意区域的像素尺寸。它模拟了设计软件（如Photoshop、Figma）中的标尺功能。常见用途包括：测量网页元素的像素大小、检查设计稿中组件的尺寸、验证前端开发中元素的宽高是否符合设计规范、测量截图中的UI元素等。对于UI设计师、前端开发者、产品经理来说，这是一款非常实用的效率工具。

操作非常简单：
① 在画布区域按住鼠标左键并拖拽，即可创建一个测量矩形；
② 拖拽时实时显示宽度(W)和高度(H)的像素值；
③ 松开鼠标完成测量，测量矩形和标签会保留在画布上；
④ 点击测量标签可查看详情，点击标签上的 ✕ 可删除该测量；
⑤ 可以上传参考图片（或按 Ctrl+V 粘贴截图），在图片上进行精确测量；
⑥ 开启放大镜功能可查看像素级细节，配合十字准线实现精准对齐。

像素(Pixel)是数字图像中最小的显示单元，也是屏幕显示的基本单位。在网页设计和UI设计中，像素是最常用的度量单位。一个像素代表屏幕上的一个点。在CSS中，1px = 1/96英寸（标准CSS像素）。本工具测量的是CSS像素，与浏览器开发者工具中的像素单位一致。对于Retina高DPI屏幕，1个CSS像素可能对应2个或更多物理像素，但本工具以CSS像素为准，确保与网页设计规范保持一致。

放大镜以3倍放大倍率显示鼠标周围约60×60像素的区域，帮助你在像素级别进行精确测量。开启放大镜后，将鼠标悬停在画布上即可看到放大的像素细节。放大镜中心有一个红色十字标记，指示精确的鼠标位置。这在以下场景中特别有用：对齐两个相邻元素的边界、测量细小元素的尺寸、检查图片的像素级细节。放大镜窗口设计为圆形，模拟真实放大镜的体验。

支持所有主流图片格式：PNG、JPG/JPEG、GIF、WebP、SVG、BMP等。你可以通过"上传图片"按钮选择文件，或直接从剪贴板粘贴（Ctrl+V）截图。所有图片处理均在本地浏览器中进行，不会上传到任何服务器。你的图片和测量数据完全保留在你的设备上，确保隐私安全。上传的图片会自动缩放以适应画布大小，缩放比例会显示在信息栏中。

浏览器开发者工具（F12）的测量功能通常需要在检查元素模式下使用，操作相对复杂。本工具的优势在于：更直观的拖拽交互、支持上传和粘贴参考图片、放大镜辅助精确定位、可同时保留多个测量结果进行对比、测量结果可复制导出。此外，对于非技术人员（如产品经理、设计师），本工具的学习成本更低，无需了解开发者工具的使用方法。

可以。本工具完全支持移动端触摸操作。在手机或平板上，使用手指在画布上拖拽即可进行像素测量。界面在移动端会自动适配，标尺和按钮会相应缩小以节省屏幕空间。不过由于移动屏幕较小，建议在平板或桌面端使用以获得更好的测量体验。移动端的放大镜窗口也会相应缩小，但仍然可以提供有用的像素级视图。