最稳妥的响应式媒体查询方案是优先使用 min-width 从移动设备向上渐进增强，避免纯 max-width 导致的覆盖冲突；断点应依内容临界点而非固定设备值设定，并确保 viewport meta 标签正确。
用 min-width 和 max-width 写响应式媒体查询最稳妥
直接上结论：纯靠 min-width 或纯靠 max-width 都容易漏掉边界情况，推荐组合使用或优先用 min-width 从移动设备向上渐进增强。浏览器对这两个属性的支持极好，连 IE9 都支持，不用额外加 polyfill。
常见错误是写成 @media (max-width: 768px) 后，又在下一个断点写 @media (max-width: 1024px) —— 这会导致 769px ~ 1024px 区间被覆盖两次，后写的规则会覆盖前写的，逻辑混乱。
- 正确做法是统一用
min-width，比如：@media (min-width: 768px)、@media (min-width: 1024px)，这样每个断点只负责“≥该宽度”的样式，自然叠加，不易冲突 - 如果必须用
max-width（例如要单独处理小屏专属样式），就限定上限并明确下限：@media (min-width: 320px) and (max-width: 767px) - 注意单位：一律用
px（不要用em或rem做媒体查询单位），避免字体缩放导致断点错位
min-width 断点选哪些值才不踩坑
别硬背“手机 375、平板 768、桌面 1024”这种过时数值。真实设备宽度千差万别，关键是按你内容撑开的临界点来定。
打开浏览器开发者工具，调小窗口宽度，边拖边看布局什么时候开始“挤”、文字换行异常、按钮重叠——那个像素值就是你的 min-width 断点。
立即学习“前端免费学习笔记（深入）”；
- 典型安全起点：
320px（老款 iPhone SE）、480px（部分安卓小屏）、768px（iPad 竖屏最小宽度） - 但如果你的导航栏在
640px就折行了，那就设@media (min-width: 641px)来改布局，而不是硬套 768 - 避免相邻断点太近（如 768 和 769），留至少 1px 间隔，防止某些浏览器四舍五入误差导致样式不触发
和 width 混用时的常见表现问题
min-width / max-width 是媒体查询条件，只控制“什么时候应用这些 CSS 规则”；而元素自身的 width 属性控制的是渲染尺寸。两者常被误认为能互相替代。
比如写 @media (max-width: 768px) { .container { width: 100%; } }，这没问题；但若漏掉 max-width 查询，直接给 .container { width: 100%; max-width: 1200px; }，那它在大屏下也会被限制在 1200px，不是“动态调整”，只是固定上限。
- 真正动态：用媒体查询切换整个布局结构，比如小屏用
flex-direction: column，大屏切回row - 别依赖
width: 100vw做响应式，它会包含滚动条宽度，导致横向溢出；改用width: 100%或max-width: 100% -
min-width查询里慎用min-width（属性），容易嵌套混淆，比如@media (min-width: 768px) { div { min-width: 300px; } }是合法的，但可读性差，建议改用width或flex-basis
移动端适配时 max-width 容易被忽略的细节
很多开发者以为写了 @media (max-width: 768px) 就覆盖所有小屏，其实 iOS Safari 的“视觉视口”（visual viewport）宽度可能远大于设备物理宽度，尤其在双指缩放后。这时候 max-width 查的是 layout viewport，不一定匹配用户看到的区域。
根本解法是确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在且没被覆盖。否则媒体查询基于错误的基准计算，再精细的 max-width 也没用。
- 检查 Chrome DevTools 的 “Device Toolbar” 是否显示 “Responsive” —— 如果显示具体型号（如 iPhone 12），说明 viewport 设置生效；如果显示 “Desktop”，大概率 meta 标签缺失或写错
- 用
window.matchMedia在控制台手动测试：matchMedia('(max-width: 768px)').matches，返回true才说明当前环境真被识别为小屏 - Android WebView 和旧版微信内置浏览器对
max-width解析有偏差，如有兼容需求，加一条@media (max-device-width: 768px)作兜底（仅限必要场景）
