设计配色

响应式断点可视化测试工具

实时显示当前窗口宽度对应的 CSS 框架断点,支持 Tailwind CSS、Bootstrap 和 Material UI 预设。

响应式断点设计

收藏工具

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

快捷操作

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

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

设计配色

响应式断点测试器

当前窗口信息

宽度-
高度-
DPR-
设备宽度-
当前断点-

断点可视化

常见设备尺寸

iPhone SE

375 × 667

iPhone 15 Pro

393 × 852

iPad Air

820 × 1180

MacBook Pro 14

1512 × 982

使用场景

  • 确认当前窗口的响应式断点
  • 对比不同框架的断点设置
  • 前端响应式开发参考

如何使用

  1. 选择 CSS 框架预设
  2. 调整浏览器窗口大小
  3. 查看当前断点信息

示例输入输出

窗口宽度

768px

Tailwind

md 断点

FAQ

支持哪些框架?

支持 Tailwind CSS、Bootstrap 5、Material UI 和自定义断点四种预设。

工具列表

相关推荐

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

像素标尺

像素标尺 - 屏幕尺寸与刻度工具

可用

在页面内绘制可切换方向的像素刻度标尺,可调长度与刻度间距,并显示窗口尺寸与设备像素比,适合核对 CSS 像素尺寸。

像素 标尺 测量

CSS 单位转换

CSS 单位转换 - px rem em vw 工具

可用

在 px、rem、em、pt、vw、vh、% 之间换算,可自定义根字号、父元素字号与视口宽高,适合响应式与设计稿转代码。

CSS 单位 换算