页面标尺为任意网页添加类 Photoshop 风格的标尺与可拖动参考线。像素精准的标尺沿 viewport 顶部和左侧边缘排列，您可将参考线拖至页面上，直接在实时页面中测量距离、检查对齐与验证间距。
在 Figma 或 Photoshop 中工作的设计师依靠标尺和参考线来检查间距与对齐。但当这些设计用 HTML/CSS 实现后，验证像素精度通常需要打开 DevTools，逐一悬停元素，再将计算值与设计稿进行比对。页面标尺将熟悉的标尺与参考线工作流直接带入浏览器。带刻度线的水平标尺横跨 viewport 顶部，垂直标尺沿左侧边缘排列——均显示像素位置。从任意标尺点击拖动，即可将参考线拉到页面上。参考线有颜色区分（水平为蓝色，垂直为红色），并显示其像素位置。任意两条平行参考线之间的距离会自动计算并显示。可拖动参考线重新定位，或双击将其删除。整个覆盖层不影响页面布局或交互，以非侵入方式叠加在页面之上。
沿 viewport 顶部和左侧边缘排列的精准标尺，每 50 像素带有刻度线，以页面原点 (0,0) 为基准显示准确的像素位置。每 10px 一个刻度，每 50px 标注一次数值，随页面滚动。
从水平标尺点击拖动可创建水平参考线，从垂直标尺拖动则创建垂直参考线。参考线吸附至光标位置，并显示精确的像素坐标（例如 y: 200px）。可拖动重新定位，双击可删除。
放置两条平行参考线后，它们之间的像素距离会自动计算，并以连接括号和标签形式显示。例如，将两条水平参考线相距 120px 放置，即可看到其间标注的"120px"。
水平参考线为蓝色，垂直参考线为红色——在放置多条参考线时，一眼即可轻松区分。每条参考线通过小型标签徽章显示其位置。
标尺和参考线以透明覆盖层的形式渲染，不影响页面的 DOM、布局或 JavaScript。您仍可点击穿透覆盖层与页面元素交互。覆盖层仅捕获标尺和参考线手柄上的点击事件。
可根据需要放置任意数量的参考线，没有数量限制。使用水平和垂直参考线标记页面上每个重要的对齐点，构建完整的测量网格。
设计稿标注 header 高度为 80px，内容从顶部 120px 处开始。在对应位置放置水平参考线，即可立即验证实现后的页面是否符合设计规范。
在重复元素（卡片、列表项、区块）的顶部和底部放置参考线，以验证它们是否具有相同的间距。各元素之间不一致的间隙会立刻显现出来。
在标题左边缘放置垂直参考线，然后检查下方的段落文本、按钮和图片是否对齐至同一条线。即使几个像素的偏差，在参考线对比下也会一目了然。
在元素左右边缘分别放置垂直参考线以测量其宽度，在上下边缘放置水平参考线以测量高度。自动计算的距离值即为精确的像素尺寸。
在常见断点宽度（768px、1024px、1280px）处放置垂直参考线，并调整浏览器尺寸，检查元素是否在每个断点处正确重排。参考线作为固定的视觉基准点保持不变。
打开 DevSuite Pro 浮动工具栏，点击页面标尺图标。像素精准的标尺随即出现在 viewport 的顶部和左侧边缘。
从顶部标尺点击拖动以放置水平参考线，或从左侧标尺拖动以创建垂直参考线。参考线跟随光标移动，并吸附至您松开鼠标时的像素位置。
每条参考线均显示其像素位置（例如 y: 200px）。放置两条平行参考线后，它们之间的距离会自动以带标签的括号形式显示。
拖动任意参考线可将其移至新位置——距离标签实时更新。双击参考线可将其从页面上删除。
再次点击页面标尺图标，隐藏所有标尺和参考线。在同一会话中重新激活时，您的参考线位置将被保留。
