@media是响应式底层基础设施，零运行时开销且被所有浏览器原生支持；失效主因是缺失viewport meta标签；推荐用min-width向上增强，避免嵌套与误作加载器，并需覆盖深色模式、dpr、横竖屏等多维度条件。
因为@media仍是目前唯一被所有浏览器原生支持、零运行时开销、可精准匹配设备能力的样式条件开关。它不是“过时方案”，而是响应式底层基础设施——JS方案要等脚本执行，CSS-in-JS要走渲染管线，而@media在样式解析阶段就完成匹配。
viewport没配对，@media就是摆设
所有@media失效的第一原因：HTML里漏了<meta name="viewport" content="width=device-width, initial-scale=1">。没有它，移动端浏览器按980px默认视口渲染，@media (max-width: 768px)永远不触发。这个标签必须放在最前面，且不能写成content="width=375"或带user-scalable=no（除非产品强约束）。
min-width比max-width更可靠
用@media (min-width: 768px)向上增强，而不是@media (max-width: 767px)向下收缩。理由很实在：
- 避免边界值问题：某些高DPR设备视口宽度可能是767.5px，
max-width: 767px直接跳过 - 样式体积更小：基础样式写手机端，大屏只增量覆盖
- 断点逻辑连续：
min-width: 768px→min-width: 1024px→min-width: 1200px，无间隙 - 不混用
min-和max-：否则容易在横竖屏切换、系统字体放大时出现竞态
@media不能嵌套，也不能当加载器用
这两点最容易被新开发者误踩：
-
@media必须顶层声明，不能写在.header { ... }内部——这种写法所有真实浏览器直接忽略，DevTools可能“假装支持”，但真机必挂 -
@media只控制样式是否生效，不控制CSS文件是否下载；想真正按需加载，得用<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">，注意href路径必须准确，否则静默失败 - IE9及以下会无视
media属性，如需兼容，得fallback到JS检测+动态插入
别只盯着width，深色模式/DPR/横竖屏都得覆盖
现代适配早已不止于宽度：
- 深色模式：
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } } - 像素比：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)适配高清屏图片 - 横竖屏：
@media (orientation: landscape)调整布局，但注意它依赖viewport设置，真机测试不能只靠DevTools模拟 - 所有媒体特性必须显式写
screen类型，否则可能被打印样式干扰
真正难的是断点数值本身——它不是iPhone型号列表，而是你内容撑不开的那个临界点：文字换行异常、按钮太挤、图片溢出的位置。这些点得从设计稿和真机实测里抠出来，不是抄别人配置就能跑通的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
