design / 可用工具

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

实时显示当前窗口宽度对应的 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. 1. 选择 CSS 框架预设
  2. 2. 调整浏览器窗口大小
  3. 3. 查看当前断点信息

示例输入输出

窗口宽度

768px

Tailwind

md 断点

FAQ

支持哪些框架?

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

工具列表

相关推荐

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

像素标尺工具

像素标尺与屏幕信息工具

可用

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

像素 标尺 设计

CSS 单位转换

CSS 单位转换器

可用

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

CSS 单位 转换