设置
800px 长度 / 10px 刻度 / 水平
输出
水平像素刻度标尺 + 窗口与 DPR 信息
设计配色
像素标尺 - 屏幕尺寸与刻度工具
在页面内绘制可切换方向的像素刻度标尺，可调长度与刻度间距，并显示窗口尺寸与设备像素比，适合核对 CSS 像素尺寸。
像素标尺测量
设计配色
像素标尺
屏幕信息
窗口宽度-
窗口高度-
设备像素比-
屏幕分辨率-
使用场景
- 对照设计稿核对像素间距
- 查看当前窗口宽高与 DPR
- 切换水平/垂直标尺做布局参考
如何使用
- 设置标尺长度与刻度间距
- 选择水平或垂直方向与主题
- 查看屏幕与标尺信息
示例输入输出
FAQ
标尺按什么像素绘制？
按 CSS 像素绘制，并展示设备像素比，便于区分物理像素与布局像素。
长度范围是多少？
长度可在约 100–2000px 间调节，刻度间距可选 5/10/20/50px。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 单位转换
CSS 单位转换 - px rem em vw 工具
在 px、rem、em、pt、vw、vh、% 之间换算，可自定义根字号、父元素字号与视口宽高，适合响应式与设计稿转代码。
CSS 单位 换算
宽高比计算
宽高比计算 - 在线等比尺寸工具
在线计算并锁定宽高比，可由原始尺寸推比例，也可在锁定比例下改一边求另一边，附预设分辨率与预览，适合切图、视频画幅和响应式布局。
比例 尺寸 设计
CSS Clamp 生成
CSS Clamp 生成 - 流式尺寸响应式工具
根据最小/最大视口宽度与目标尺寸范围，计算 clamp() 公式，用于字号、间距等随视口线性缩放的响应式排版。
CSS clamp 响应式