移动端媒体查询不生效，主因是未遵循mobile first原则：未设viewport、断点脱离设备真实逻辑宽度（如误用480px而非768px）、混用max/min-width或结构倒置。
移动端媒体查询不生效，八成是没走对 Mobile First 路子——不是语法写错了，而是结构逻辑反了、断点设偏了、或者 viewport 根本没配。
必须先写基础样式，再用 @media (min-width: ...) 逐步增强
Mobile First 不是口号，是代码顺序：所有默认样式（无媒体查询包裹）都针对最小屏幕（比如 320px–430px），然后用 @media (min-width: 768px)、@media (min-width: 992px) 一层层往上加规则。这样浏览器从上到下解析时，小屏设备只加载基础样式，大屏才叠加增强规则。
- 错例：
@media (max-width: 767px) { .nav { display: none; } }—— 这是 desktop-first 思维，强迫小屏“隐藏”本不该出现的元素 - 对例：
.nav { display: flex; } @media (min-width: 768px) { .nav { display: grid; } }—— 小屏默认用简单 flex，平板以上才升级为 grid - 别在基础样式里写
width: 100vw或height: 100vh，它们在小屏会直接溢出，应优先用%、rem、max-width
断点值选 768px、992px、1200px，别碰 480px 或 320px
现代 iPhone 竖屏逻辑宽度已是 390px / 430px，iPad mini 是 744px，iPad Pro 是 834px——这些数字决定了 768px 是最稳妥的“平板起始点”。用过时断点（如 480px）会导致样式在主流设备上完全不触发。
-
@media (min-width: 768px)：覆盖 iPad 竖屏及以上（含折叠屏展开态） -
@media (min-width: 992px)：对应常见笔记本窄屏（1280×800 及以上） -
@media (min-width: 1200px)：适配桌面宽屏，可在此启用三栏或侧边导航 - 避免混用
max-width和min-width同一断点值（比如max-width: 768px和min-width: 768px），768px 精确宽度下两者都匹配，CSS 后写的会覆盖前写的，行为不可控
<meta name="viewport"> 必须放在
没有这行，移动端永远按 980px 渲染，@media 直接失效——这不是 CSS 问题，是浏览器根本没拿到正确视口宽度。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 缺
width=device-width→ 手机强制以 980px 宽度渲染，min-width: 768px永远不进 - 缺
initial-scale=1.0→ 页面可能被缩放，视口宽度计算失准（尤其 iOS Safari） - 别加
user-scalable=no，不仅破坏可访问性，iOS Safari 16+ 已禁用该属性
媒体查询里能用 calc() 和 CSS 变量，但有硬限制
想动态算断点？可以，但得守边界。媒体查询条件中 calc() 只支持长度单位运算，CSS 变量则必须在声明时就已定义（不能靠 JS 动态注入后生效）。
- 合法：
@media (min-width: calc(50vw + 10px))——vw和px都是长度单位 - 非法：
@media (min-width: calc(1rem + 1em))——rem和em是相对单位，浏览器无法在解析媒体查询时确定其绝对值 - CSS 变量可用，但必须是 :root 级定义，例如：
:root { --breakpoint-md: 768px; } @media (min-width: var(--breakpoint-md)) { ... } - 别指望用 JS 改变
--breakpoint-md后媒体查询自动重算——它只在 CSS 解析阶段读取一次
真正卡住人的从来不是语法，而是 viewport 缺失、断点和设备真实逻辑宽度脱节、以及把 Mobile First 当成“先写手机样式”而不是“默认就是手机样式”。写完记得用 Chrome DevTools 的 device toolbar 切换真实设备型号，别只拉窗口模拟——有些折叠屏、竖屏 iPad 的行为，拖拽根本模拟不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
