最常见原因是缺少viewport meta标签，导致移动端以桌面宽度渲染；其次为CSS加载顺序错误，后定义的基础样式覆盖了媒体查询规则。
为什么写了 @media (max-width: 768px) 小屏却没生效
最常见原因是缺了 。没有它，移动端浏览器会以桌面宽度（比如 980px）渲染页面，@media (max-width: 768px) 根本不会触发。
另一个高频问题是 CSS 加载顺序：如果基础样式（比如大屏背景、固定宽度容器）写在媒体查询之后，它就会覆盖掉小屏规则——浏览器按顺序解析，后写的赢。
- 确保
标签在最顶部，且不要加user-scalable=no等干扰缩放的属性 - 把通用样式（默认适配手机）写在最前面，
@media规则统一放在后面 - 真机测试时注意横竖屏切换、系统字体放大，这些都会改变视口计算宽度
@media (min-width: 768px) 和 @media (max-width: 767px) 能不能混用
不建议。看似无缝（767 → 768），但某些设备（如 iPad Pro 横屏 1024×1366）因 DPR、缩放或 viewport 缩放误差，可能让视口宽度落在 767.5px 这类“间隙”中，导致两个规则都不命中。
更稳妥的做法是只用 min-width 单向递进，基础样式默认适配最小屏：
/* 默认：手机 */<br>.card { width: 100%; padding: 1rem; }<br><br>/* 平板及以上 */<br>@media (min-width: 768px) {<br> .card { width: 50%; margin: 0 auto; }<br>}<br><br>/* 桌面 */<br>@media (min-width: 1024px) {<br> .card { width: 30%; }<br>}
- 避免
max-width和min-width混用，尤其不要用max-width做“回退”逻辑 - 断点值建议取整、避开常见缩放临界点（如避免用 767.92px）
- Chrome DevTools 的 device toolbar 只是模拟，必须在真机上验证横竖屏切换行为
背景图在不同屏幕下切换失败的典型原因
背景图不切换，往往不是媒体查询写错了，而是路径、优先级或加载时机问题。
- 检查图片路径是否相对正确：小屏规则里用的
background-image: url('./img/bg-mobile.jpg')，别漏掉./或写成绝对路径导致 404 - 确保大屏背景定义在前，小屏覆盖在后；否则小屏规则被大屏覆盖，永远不生效
- 如果用了
background-size: cover，在窄高屏（如 iPhone X 系列）可能裁剪过度，建议搭配background-position: center - 不要为同一元素重复声明多个
background-image，CSS 不支持“条件性叠加”，只认最后一条
响应式布局中容易被忽略的兼容细节
现代浏览器对 @media 支持很好，但几个边缘情况仍会翻车：
- iOS Safari 在未设置
initial-scale=1时，可能自动缩放，导致媒体查询基于缩放后的视口宽度计算，而非物理视口 - 部分 Android WebView 对
min-width的解析存在 1px 偏差，建议断点留 2–3px 余量（如用min-width: 770px替代768px） -
vh/vmax单位在 iOS Safari 中受地址栏显示/隐藏影响，高度会跳变；涉及全屏背景或高度依赖场景，慎用 - 媒体查询本身不触发重排，但频繁切换断点 + 大量 DOM 操作可能卡顿，复杂布局建议配合
will-change: transform或用 JS 节流监听resize
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
