link标签的media属性直接写css媒体查询表达式，浏览器原生匹配后才加载应用样式表；常见写法如media="(max-width: 768px)"或media="(prefers-color-scheme: dark)"，多条件用and连接，括号不可省。
link标签的media属性怎么写媒体查询条件
直接在 <link> 标签里用 media 属性写 CSS 媒体查询表达式，浏览器会根据当前环境匹配后才加载或应用该样式表。这不是 JS 控制的，是 HTML 原生支持的机制。
常见写法包括：
-
media="screen"：仅用于屏幕设备（默认值，可省略） -
media="print"：仅在打印预览或调用window.print()时生效 -
media="(max-width: 768px)"：视口宽度 ≤ 768px 时加载并应用 -
media="(prefers-color-scheme: dark)"：系统设为深色模式时启用 -
media="screen and (min-width: 480px) and (max-width: 1024px)"：多条件组合，注意用and连接，括号不能省
多个link标签共存时的加载与优先级规则
浏览器会并行下载所有 <link rel="stylesheet">，但只对 media 匹配当前环境的样式表执行解析和渲染阻塞；不匹配的仍会下载（除非是 rel="preload" 等特殊类型），但不会参与样式计算。
关键点：
- 不匹配的样式表仍可能触发网络请求（HTTP/2 下影响小，但 HTTP/1.1 下占连接数）
- 所有匹配的样式表按 HTML 中出现顺序层叠，与
media内容无关 -
media="not screen"这类否定写法极少用，且容易误判——比如在手机浏览器中，not screen实际匹配不到任何常见设备 - 若想彻底避免非必要加载，可用
rel="preload" as="style" onload="this.rel='stylesheet'"配合 JS 动态切换，但这是进阶方案，不是<link>原生行为
media属性不生效的典型原因
写了 media 却没效果？大概率是这几个问题：
- 拼写错误：
meda、media="max-width: 768px"（漏了括号）→ 必须是media="(max-width: 768px)" - 单位缺失：
media="(max-width: 768)"→ 像素必须带px，em/rem 也可，但不能裸数字 - 响应式断点未触发：检查浏览器 DevTools 的设备模拟器是否开启，或手动缩放窗口——某些 CSS 单位（如
vh）在移动端可能受地址栏高度影响，导致实际视口宽度和预期不符 - 样式被后续无
media的<link>覆盖：例如先写media="(max-width: 768px)"，再写一个无media的通用样式表，后者在所有尺寸下都生效，容易覆盖前者定义的规则
和CSS内部@media相比，link的media有什么实际差异
核心区别不在功能，而在资源加载时机和粒度控制：
-
<link media="...">是“条件加载”：不匹配时，整个 CSS 文件不参与渲染流程（但仍可能已下载） - CSS 内部的
@media {...}是“条件应用”：文件总会加载并解析，只是其中规则按条件启用/禁用 - 当某套样式非常重（比如含大量字体、图片、复杂动画），用
<link media>可减少首屏关键路径的 CSS 解析压力 - 但拆太多
<link>会增加 HTTP 请求（尤其 HTTP/1.1），现代项目更倾向单文件 + 内部@media，配合构建工具提取关键 CSS -
media不支持 JavaScript 表达式，也不能读取运行时状态（如用户滚动位置），这点比 JS 动态 class 切换弱得多
media 最稳的用法还是基础响应断点和 print/prefers-color-scheme 这类明确、静态、浏览器原生支持的场景。别指望它做运行时精细控制——那该交给 JS 或 CSS 自定义属性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
