CSS 媒体查询生成器（断点）

CSS 媒体查询生成器（断点）: 用途

媒体查询让布局随屏幕变化。此生成器用 Bootstrap 5（576、768、992、1200 和 1400 px）、Tailwind（640、768、1024、1280 和 1536 px）、简单的一组或你自己的断点生成 CSS 骨架。

可选择移动优先（min-width）、桌面优先（max-width，带 Bootstrap 使用的 0.02 px 调整）或区间，单位 px 或 em，并添加深色模式、减少动态效果、鼠标或触摸、方向、打印和高对比度的查询。调整窗口大小，即可看到哪些媒体查询在生效。

使用方法

1. 选择断点和方式。
2. 勾选额外的查询。
3. 复制或下载 CSS。

使用场景

• 开始新网站的 CSS。
• 统一团队的断点。
• 学习媒体查询的工作方式。

常见问题

移动优先还是桌面优先？

移动优先是目前最常用的：基础 CSS 针对手机，每个 min-width 为更大的屏幕增加调整。这样网络和处理器通常较弱的手机要读取的规则更少。桌面优先（max-width）则相反，适合改造旧网站。

该用哪些断点？

Bootstrap 5 的是 576、768、992、1200 和 1400 px；Tailwind 的是 640、768、1024、1280 和 1536 px。比起照搬某个框架，更好的做法是把断点设在你的布局出问题的位置，不过这两组都是不错的起点。

媒体查询里为什么用 em？

在媒体查询中，1em 等于浏览器的默认字号（通常是 16 px）。如果用户调大了默认字号，用 em 的断点会随之变化，布局在正确的位置切换，而 px 做不到这一点。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具