📱
响应式断点生成器
常用设备断点速查，勾选生成 min/max-width 媒体查询，响应式布局必备。
本地处理 · 不上传
加载工具中…
相关：media query · 断点 · 响应式 · breakpoint · css · 移动端
响应式断点生成器按常见设备尺寸生成媒体查询代码，可自定义断点数值，并说明各断点覆盖的设备范围。断点该设在哪里，最终由内容何时变形决定，而不是照抄机型尺寸表。
使用步骤
- 选择或自定义断点数值
- 选择移动优先或桌面优先
- 查看生成的媒体查询
- 复制到样式表
使用场景
- 为新项目建立响应式断点体系
- 为现有样式补充移动端适配
- 统一团队的断点规范
- 确认某个尺寸区间的写法
小贴士
- 移动优先（min-width）写法通常更简洁：默认样式服务小屏，逐级向上覆盖，避免为小屏反复重置桌面样式。
- 断点应该由内容决定而非设备型号。布局在某个宽度开始变形，那里才是该加断点的地方。
- min-width 与 max-width 混用时要注意边界重叠，`max-width: 768px` 与 `min-width: 768px` 在恰好 768px 时会同时命中。
常见问题
该用 min-width 还是 max-width？
推荐移动优先，即用 min-width 逐级增强。这样基础样式最简单，且在不支持媒体查询的环境下退化为可用的移动版。
断点数值怎么定？
不要照抄具体机型宽度，那份清单每年都在变。更可靠的做法是缩放浏览器窗口，看布局在哪个宽度开始难看，就在那里设断点。
容器查询能替代它吗？
部分可以。容器查询按父容器宽度响应，更适合组件级适配；整页布局的切换仍然由媒体查询处理。两者是互补关系。
响应式断点生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用响应式断点生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。