link标签的media属性需符合css媒体查询语法才生效，如media="screen and (min-width: 768px)"；错误写法如"min-width: 768px"因缺括号和and而不解析；其仅控制加载与否，不响应窗口变化，且依赖viewport设置与缓存清理。
link标签的media属性怎么写才生效
直接在 <link> 标签里加 media 属性，浏览器会按条件加载或忽略对应CSS文件。关键不是“写了就起作用”，而是值必须符合CSS媒体查询语法，且不能带多余空格或错误括号。
-
media="screen and (min-width: 768px)"✅ 正确，匹配桌面端 -
media="(min-width: 768px)"✅ 也行，省略screen默认就是屏幕设备 -
media="min-width: 768px"❌ 缺少括号和and，完全不解析 -
media="all and (max-width: 480px)"✅ 可用，但all没实际意义，建议删掉
多个media条件共存时的加载逻辑
浏览器对每个 <link media="..."> 独立判断，满足即下载并应用；不满足则跳过（不下载、不解析、不阻塞渲染）。这和CSS内部的@media规则不同——后者即使不匹配也会被下载和解析。
- 页面同时有
<link media="(max-width: 767px)" href="mobile.css">和<link media="(min-width: 768px)" href="desktop.css">，小屏只下mobile.css，大屏只下desktop.css - 如果两个
media范围重叠（比如都写了(min-width: 480px)），浏览器会同时加载两者，样式层叠按HTML顺序执行 - 移动端首次加载时若用
media="(min-width: 1024px)"，该CSS根本不会发起请求，节省流量和解析开销
media属性不生效的三个高频原因
不是代码写错，就是环境或理解偏差。最常卡在这三处：
- viewport meta标签缺失：
<meta name="viewport" content="width=device-width, initial-scale=1">没加，导致移动端始终以980px宽渲染，(max-width: 480px)永远不匹配 - 浏览器缓存了旧的
<link>标签：改了media值但没清缓存，用Ctrl+F5硬刷或检查Network面板确认请求是否发出 - 误以为
media能响应式切换已加载的CSS：它只控制“是否加载”，不监听窗口变化。想动态切换得靠JavaScript监听resize再手动换href
和CSS里@media相比，link media有什么代价
优势是资源按需加载，劣势是粒度粗、不可复用、无法组合条件。比如你没法在一个<link>里同时表达“横屏+高DPI+宽屏”，只能拆成多个文件或退回到CSS内部@media。
立即学习“前端免费学习笔记（深入）”；
- 拆多文件：维护成本上升，HTTP请求数增加（HTTP/2下影响变小，但仍有解析开销）
- 无法嵌套或取反：不支持
not screen and (color)这种写法，not必须紧贴媒体类型，如not print - 兼容性没问题：IE9+、所有现代浏览器都支持
<link media>，但IE9不支持orientation等部分特性
真正难的是权衡——要不要为省几KB CSS，多维护两套文件路径和构建逻辑。尤其当设计系统里@media规则本身就很零碎时，硬拆<link>反而让调试更费劲。
