必须先写基础样式再用@media覆盖，否则真机不生效；因原生css要求@media为顶层规则，嵌套在选择器内会被跳过，且viewport标签缺失或混用min-width/max-width也会导致失效。
直接用 @media 写断点，但必须先写基础样式、再用媒体查询覆盖，否则真机上大概率不生效。
为什么 @media 在 DevTools 里看着正常，手机上却没反应
常见错误是把 @media 嵌套在选择器内部，比如：
.header {
padding: 20px;
@media (max-width: 768px) { /* ❌ 原生 CSS 不支持 */
padding: 10px;
}
}
浏览器解析时会直接跳过整个 @media 块，不报错也不生效。DevTools 有时会“误判”为预处理器输出，造成假象。
- 原生 CSS 要求
@media必须是顶层规则，和选择器平级 - 正确写法是先定义
.header的默认样式，再单独写@media块去重写它 - 构建工具（如 Vite）若启用了
postcss-nested但未安装插件，也会导致开发环境 OK、生产环境失效
min-width 和 max-width 到底该选哪个
关键看你是「移动优先」还是「桌面优先」。现在绝大多数项目用移动优先，所以统一用 min-width 更安全：
-
@media (min-width: 768px)：表示「≥768px 时才启用」，基础样式天然适配小屏 -
@media (max-width: 767px)：需确保所有大屏样式不会意外泄漏到小屏，维护成本高 - 混用容易出边界重叠或遗漏，比如
max-width: 768px和min-width: 768px在 768px 这个点上可能同时/都不匹配 - 推荐断点用连续区间：
min-width: 320px→min-width: 768px→min-width: 1200px
如何让布局切换更自然，不只是改宽度
光调 width 或 padding 往往不够，得配合布局模型本身切换：
- 移动端用
flex-direction: column堆叠内容，平板起改row并加gap - 卡片列表在小屏单列，中屏用
display: grid+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 导航栏在小屏收进 hamburger，靠
@media (min-width: 768px)恢复横排 +display: flex - 避免用
100vw做全宽——滚动条宽度会导致横向溢出，改用width: 100%+box-sizing: border-box
真机测试前必须检查的三件事
很多“不生效”问题其实和媒体查询本身无关：
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">已写在里，否则 iOS Safari 会强制缩放 - 清除真机浏览器缓存，尤其是 iOS：关掉标签页重开，或临时开启「请求桌面网站」再切回
- Android 某些 WebView 对
orientation或resolution支持不稳定，优先用width类断点，少依赖device-width
断点不是越多越好，三个主流区间（手机 / 平板 / 桌面）覆盖 95% 场景；过度细分反而增加维护负担和 CSS 体积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
