LocalTools离线浏览器工具合集

分类: 开发工具

响应式断点速查表

站方自主规划没找到想要的工具？

对比框架断点，或生成自定义媒体查询

对比 Tailwind、Bootstrap、Bulma 和 Material Design 的默认 min-width 断点，复制任意断点的媒体查询，或输入自定义断点生成 CSS。

名称最小宽度（min-width）
sm640px
md768px
lg1024px
xl1280px
2xl1536px
媒体查询
@media (min-width: 640px) {
  /* sm */
}

@media (min-width: 768px) {
  /* md */
}

@media (min-width: 1024px) {
  /* lg */
}

@media (min-width: 1280px) {
  /* xl */
}

@media (min-width: 1536px) {
  /* 2xl */
}

每行输入一个名称和一个像素宽度，例如 "md, 768"。

名称最小宽度（min-width）
sm480px
md768px
lg1100px
xl1440px
媒体查询
@media (min-width: 480px) {
  /* sm */
}

@media (min-width: 768px) {
  /* md */
}

@media (min-width: 1100px) {
  /* lg */
}

@media (min-width: 1440px) {
  /* xl */
}

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

不同 CSS 框架会使用不同的断点名称和像素宽度，在多个项目之间切换时很容易记混。这个工具把四个常见框架的默认断点并排列出，并可把它们或你输入的自定义断点转换成可直接粘贴的 @media (min-width: ...) 代码块。

使用方法

  1. 选择一个框架，查看默认断点和媒体查询。
  2. 复制你需要的 CSS。
  3. 或输入自己的断点名称和宽度来生成自定义查询。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

为什么使用 min-width 而不是 max-width？
移动优先的 min-width 写法让基础样式面向小屏幕，再在更大断点逐步增强，和多数框架的默认方式一致。
这些数值和框架默认值一致吗？
是的，这里列的是各框架文档中的默认断点。如果你的项目自定义了配置，请使用自定义断点生成器输入自己的数值。
自定义断点怎么写？
每行一个断点，名称和像素宽度用逗号或空格分隔，例如 "md, 768"。

返回全部工具