media属性在html解析阶段即生效，决定浏览器是否发起css请求；必须正确书写括号如screen and (max-width: 768px)，print需显式声明media="print"，暗色模式需搭配无media的基础样式表，多条件应避免重叠。
media 属性不是“设个值就完事”，它直接决定浏览器要不要发起 CSS 请求——不匹配，连 mobile.css 的网络请求都不会出现在 DevTools 的 Network 面板里。
media="(max-width: 768px)" 这类写法必须加括号
漏掉括号会退化为无效值，浏览器按 media="all" 处理，导致本该跳过的样式表被全量下载。比如：
-
media="screen and max-width: 768px"❌ —— 缺少括号，非法语法 -
media="screen and (max-width: 768px)"✅ —— 正确，screen是媒体类型，(max-width: 768px)是媒体特性，用and连接 -
media="(max-width: 768px)"✅ —— 单独媒体特性也合法，但旧版 Safari（≤12）可能忽略，生产环境建议加上screen and
print 样式表必须显式写 media="print"
写成 media="screen" 或漏掉 media 属性，打印预览里样式大概率消失。这不是渲染问题，是资源根本没加载：
-
<link rel="stylesheet" href="print.css" media="print">✅ —— 唯一可靠写法 -
<link rel="stylesheet" href="print.css" media="all">⚠️ —— 理论上包含 print，但部分旧打印驱动不认，慎用 - 不要在
print.css里再套一层@media print { ... }—— 冗余，外部media="print"已足够
prefers-color-scheme 暗色模式要配默认样式
浏览器只对匹配的 media 值加载对应 CSS，不匹配就跳过。所以 light.css 和 dark.css 都不能单独存在：
- 必须有一份无
media的基础样式表（如base.css），提供字体、间距、重置等通用规则 <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)"><link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">- Safari 12.1+、Chrome 76+、Firefox 93+ 才支持；旧浏览器直接忽略这两行，只用
base.css
多个 media 条件之间别重叠
比如同时写 media="(min-width: 768px)" 和 media="(min-width: 1024px)"，768–1023px 区间只会加载前者，没问题；但若写成：
media="(max-width: 767px)"media="(min-width: 768px) and (orientation: portrait)"media="(min-width: 768px) and (orientation: landscape)"
横屏桌面设备会同时匹配后两个，触发两次请求——除非你真需要两套独立横竖屏样式，否则更推荐用单 CSS 文件内 @media 控制。
真正容易被忽略的是：media 属性在 HTML 解析阶段就生效，它不监听窗口 resize，也不随系统主题切换自动更新。要响应式切换，得靠 JS 监听 window.matchMedia 并手动替换 <link> 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
