×
←
→
适用于以下浏览器
屏幕统治者是Web开发人员和设计师希望验证其网站实现的理想伴侣。
激活后，屏幕标尺允许您仅通过将任何元素悬停在任何元素上来查看尺寸，边距，桨式，标签名称，ID和类。
您还可以选择一个元素来测量与其他元素的距离。
用法 - 通过单击扩展图标，从右键单击上下文菜单中选择“屏幕标尺”，或使用快捷方式```屏幕''图标来切换屏幕标尺。
- 悬停在网页上的元素上，以显示其大小，边距，桨板，标签名称，ID和类。
- 通过直接单击它来选择一个元素，这将变成高光红色。
要取消选择，请再次单击，按逃生或选择其他元素。
- 要选择元素的父，请使用“ alt/option + up”，将选择转移到父元素中，请使用`and/option + down“转向选择。
- 查看侧面面板中当前选择元素的计算CSS。
单击“复制CSS”按钮以将当前选择的项目的计算CSS复制到剪贴板。
特征 - 测量任何元素的像素大小。
- 测量任何两个元素之间的像素距离。
-HTML标签名称，类名称和ID。
- 父/儿童选择快捷方式。
- 响应式选择与您的浏览器窗口大小。
- 从上下文菜单访问。
- 计算的CSS检查。
- 将CSS复制到剪贴板。
- 在任何网页上都可以使用。
- 通过访问“ Chrome：// Extensions/oftcuts”来自定义键盘快捷键。
屏幕统治者Pro 屏幕统治者还提供了一个会解锁其他功能的专业层。
1。
元素检查：将鼠标移到其上时，请参阅元素的属性。
包括有关元素位置，大小，渲染字体，颜色等的信息。
2。
布局网格：覆盖站点顶部的布局网格，以确保您的设计对齐。
3。
通过单击屏幕截图控件或使用`ctrl/command + Shift + Shift + S`键盘快捷键来捕获当前突出显示区域的屏幕截图。
非常适合文档或附上GitHub门票。
4。
请参阅浏览器侧面面板中的高级属性，包括元素框型号，选择颜色，资产等。
屏幕统治者Pro需要一次性的终身访问付款。
要升级到Pro，请在上下文菜单中单击“升级到Pro”，或右键单击“升级选项”的扩展图标。
屏幕标尺是为 - 开发人员：发现布局问题或确定对齐问题。
无论您是在调整边距和桨板，还是只是确保所有内容都正确排队，屏幕标尺都将成为您开发工具包的必不可少的添加。
- 设计师：确保您的设计已经以像素完美的精度实现。
屏幕标尺充当设计和开发之间的桥梁，允许您检查每个元素都按照您的预期对齐。
安装 - 屏幕标尺专为Google Chrome 116+的稳定性而设计。
- 屏幕标尺可在任何铬浏览器上安装，但是，为了获得最佳体验，请确保您的浏览器支持所有必需的API（例如侧面板和屏幕外）。
如果安装有任何问题，请将您的浏览器更新到最新版本，然后重试。