@media必须独立于选择器顶层声明，嵌套写法被真机浏览器直接忽略；同时需配置viewport元标签，否则max-width基于980px默认宽度而非视口。
媒体查询在开发者工具里看着正常，但真机上完全不生效——大概率是写法违规或漏了关键前提，不是逻辑问题。
为什么 @media 在手机上不触发
原生 CSS 不允许把 @media 嵌套在选择器内部。这种写法会被浏览器直接忽略：
.header {
background: #333;
@media (max-width: 768px) { /* ❌ 无效：嵌套在 .header 里 */
background: #666;
}
}
DevTools 有时会“假装支持”，尤其当你启用了实验性 CSS 功能或误判为预编译输出，但真实环境一律跳过。
- 必须把
@media提升到顶层，和选择器平级 - 确保 HTML 中有正确的
<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺这个，max-width就不是视口宽度，而是默认的 980px - 真机测试前清缓存：iOS Safari 可关闭标签页重开；Android Chrome 用硬刷新（Ctrl+Shift+R 或长按刷新按钮）
@media screen and (min-width: ...) 和 @media (max-width: ...) 怎么选
推荐统一用 min-width 向上增强，更符合“移动优先”逻辑，也避免断点重叠或遗漏。
-
@media (max-width: 767px)容易和@media (min-width: 768px)留出 1px 缝隙，导致某些宽度无样式覆盖 - 多个断点建议连续定义：
@media (min-width: 768px)、@media (min-width: 992px)、@media (min-width: 1200px) - 不要写
@media (min-width: 768px) and (max-width: 991px)这种区间——维护成本高，且一旦漏掉某段，中间设备就裸奔 -
screen必须显式写出，否则可能被打印样式表干扰（虽然多数现代浏览器默认 fallback 到all，但不保险）
单位、括号、and 这些细节错一个就失效
@media 是语法敏感型规则，拼写、空格、单位缺一不可。
- 错误：
@media (max-width: 768)→ 缺单位，必须是768px或48em - 错误：
@media max-width: 768px→ 漏@和括号，整个规则被当作文本丢弃 - 错误：
@media screen and (min-width: 768px), (orientation: landscape)→ 逗号分隔的是“或”关系，但这里混用了设备类型和特性，应拆成两个独立规则或补全screen - 正确写法示例：
@media screen and (min-width: 768px) and (orientation: landscape)
真机调试时 100vw 表现不稳定怎么办
100vw 包含滚动条宽度，在 iOS 和部分 Android 浏览器中，地址栏显示/隐藏会导致视口宽度动态变化，造成布局抖动或内容溢出。
- 优先用
width: 100%+max-width: 100%替代，它基于父容器而非视口，更可控 - 如果必须用视口单位，可加
box-sizing: border-box配合padding微调，避免滚动条挤占内容区 - 暗色模式、减少动画等高级适配，用
@media (prefers-color-scheme: dark)或@media (prefers-reduced-motion: reduce)，这些在真机上比宽度查询更可靠
最常被忽略的一点：媒体查询不是监听器，它只在页面加载和视口 resize 时重新计算。如果你用 JS 动态改了 document.documentElement.style.fontSize 却没触发 resize，@media 不会响应——这种场景得靠 window.matchMedia() 主动监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
