@media在真机失效主因是嵌套写法错误或缺失viewport标签，正确写法须将@media置于顶层并与选择器平级，且HTML中必须包含<meta name="viewport" content="width=device-width, initial-scale=1.0">。
@media 规则在真机上不生效？八成是写法违规或漏了 <meta name="viewport">，不是逻辑问题。
为什么 @media 在手机上完全没反应
最常见原因是把 @media 嵌套在选择器内部，比如：.header { @media (max-width: 768px) { ... } } —— 这种写法被所有真实浏览器直接忽略，DevTools 可能“假装支持”，但真机一跑就失效。
必须把 @media 提升到 CSS 文件顶层，和 .header 平级；同时确保 HTML 中有：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
缺这个标签，max-width: 768px 就不是按视口宽度算，而是按默认的 980px 计算。
@media (min-width: ...) 和 @media (max-width: ...) 怎么选
推荐统一用 @media (min-width: 768px) 向上增强，理由很实在：
• 移动端基础样式写一遍，大屏只增量覆盖，CSS 体积小、加载快
• 断点连续定义更安全：比如 @media (min-width: 768px)、@media (min-width: 992px)、@media (min-width: 1200px)
• 避免 @media (max-width: 767px) 和 @media (min-width: 768px) 之间留出 1px 缝隙，导致某些宽度无样式覆盖
• 不要写区间式断点：@media (min-width: 768px) and (max-width: 991px)，维护成本高，漏掉某段设备就裸奔
@media 写错一个字符就全失效
@media 是语法敏感型规则，拼写、空格、单位、括号缺一不可：
• 错误：@media (max-width: 768) → 缺单位，必须是 768px 或 48em
• 错误：@media max-width: 768px → 漏 @ 和括号，整个规则被当作文本丢弃
• 错误：@media screen and (min-width: 768px), (orientation: landscape) → 逗号表示“或”，但混用了设备类型和特性，应拆成两个独立规则
• 正确：@media screen and (min-width: 768px) and (orientation: landscape)
• 必须显式写 screen，否则可能被打印样式表干扰（虽然现代浏览器常 fallback 到 all，但不保险）
真机调试时 100vw 抖动怎么办
100vw 包含滚动条宽度，在 iOS 和部分 Android 浏览器中，地址栏显示/隐藏会导致视口宽度动态变化，造成布局抖动或内容溢出。
优先用 width: 100% + max-width: 100% 替代，它基于父容器计算，更稳定。
另外，真机测试前务必清缓存：iOS Safari 可关闭标签页重开；Android Chrome 用硬刷新（Ctrl+Shift+R 或长按刷新按钮）——缓存里的旧 CSS 往往是“明明改了却没变”的元凶。
立即学习“前端免费学习笔记（深入）”；
