design / 可用工具

像素标尺与屏幕信息工具

在页面上展示精确的像素刻度标尺,可切换水平和垂直方向,同时显示窗口尺寸和设备像素比等屏幕信息。

像素标尺设计

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接,或者在支持的设备上直接调用系统分享。

在线工具

像素标尺工具

屏幕信息

窗口宽度-
窗口高度-
设备像素比-
屏幕分辨率-

使用场景

  • 确认设计稿中的像素尺寸
  • 检查设备像素比
  • 前端开发尺寸参考

如何使用

  1. 1. 设置标尺长度和刻度间距
  2. 2. 切换水平或垂直方向
  3. 3. 查看屏幕信息

示例输入输出

设置

800px / 10px刻度 / 水平

输出

精确的像素刻度标尺

FAQ

标尺精度如何?

标尺按 CSS 像素绘制,已考虑设备像素比,在标准显示环境下精度可靠。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

显示器宽高比例锁定

自适应切图与屏幕重构比例换算

可用

UI 设计与前端切图对决的神器。输入原始物理比例,通过改变一边即可等比约束出另一边该有的像素数。并附有直观的视觉框体预览。

Design Math Video

CSS 单位转换

CSS 单位转换器

可用

在 px、rem、em、pt、vw、vh、% 之间互转,支持自定义基准值。

CSS 单位 转换