响应式断点生成器

输入一组断点数值(逗号或空格分隔),选择「移动优先」或「桌面优先」,工具会生成对应的 @media 查询代码块。移动优先使用 min-width 并升序排列,桌面优先使用 max-width 并降序排列。全部在浏览器本地完成。

断点设置 等待输入

非数字或小于等于 0 的值会被自动忽略,重复值会去重。

生成结果
断点数—
模式—
输入断点数值后点击生成,@media 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

使用说明
  • @media (min-width: Npx) 表示视口宽度大于等于 N 时生效,常用于移动优先。
  • @media (max-width: Npx) 表示视口宽度小于等于 N 时生效,常用于桌面优先。
  • 移动优先按断点升序书写,后面的规则会覆盖前面的。
  • 桌面优先按断点降序书写,效果与移动优先后端一致。
  • 断点应依据内容而非具体设备来选取。