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> 反而让调试更费劲。
