因为min-width更符合移动优先的渐进增强逻辑，避免max-width因无下限导致的覆盖混乱；断点应基于内容崩坏点设定，如导航栏在680px换行则取676px，而非照搬Bootstrap的768px。
为什么用 min-width 而不是 max-width 写断点？
主流写法用 min-width 是因为更符合“移动优先”逻辑，避免覆盖冲突。用 max-width 容易导致样式层叠混乱，尤其在多个断点叠加时，后写的规则可能被前面的宽屏规则意外覆盖。
实操建议：
- 所有断点统一用
@media (min-width: 768px)开始，从小屏向上扩展 - 不混用
min-width和max-width，否则调试时很难判断哪条规则生效 - 如果必须兼容老项目里已有的
max-width断点，先用浏览器开发者工具的“Computed”面板确认实际生效的规则来源
如何定义真正有用的断点值，而不是照抄 Bootstrap？
断点不该是固定数字，而应由内容决定。Bootstrap 的 768px、992px 是通用假设，但你的导航栏在 680px 就换行了，那 680px 才是你该用的断点。
判断方法：
立即学习“前端免费学习笔记（深入）”；
- 打开页面，在浏览器中拖动窗口宽度，观察布局“断裂点”——比如图片溢出、文字折行异常、按钮重叠的位置
- 把那个像素值向下取整到偶数（如
678px→676px），方便后续计算和记忆 - 每个断点只解决一个具体问题，不要试图用一个断点适配所有组件
怎样避免媒体查询嵌套导致的维护灾难？
不要在 Sass/Less 里深度嵌套媒体查询，比如 .header { @media (min-width: 768px) { .nav { ... } } }。这样生成的 CSS 选择器过长，且修改某组件断点时得翻遍整个文件。
更可持续的做法：
- 把响应式规则集中写在单独的
_breakpoints.css或responsive.scss文件里 - 按组件命名断点类，例如
.card--sm、.card--md，而非靠父容器媒体查询控制 - 用 CSS 自定义属性配合媒体查询做轻量切换，比如：
:root { --gap: 1rem; } @media (min-width: 768px) { :root { --gap: 1.5rem; } } .card { gap: var(--gap); }
为什么 em 断点比 px 更可靠？
用户如果调大了系统字体大小或浏览器默认字号，px 断点会失效——布局可能在视觉上已经挤在一起，但断点还没触发。用 em 是基于当前字体尺寸计算，更贴近真实阅读体验。
换算很简单：
- 假设根元素
font-size是16px（默认），那么480px=480 / 16 = 30em - 写成
@media (min-width: 30em)，即使用户把字号调成20px，断点也会按新基准重新计算 - 注意：不要用
rem做媒体查询单位，它在部分旧版 Safari 中支持不稳定
真正难的不是写出断点，而是每次改设计稿时，重新校验这些断点是否还贴合内容的实际撑开需求。留一个空的 /* TODO: recheck breakpoints on next design update */ 注释，比什么都管用。
