通过link标签的media属性可控制CSS文件在特定条件下加载，优化性能和响应式体验。1. 基本语法为<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">，仅当设备为屏幕且视口宽度≥768px时加载；2. 常见值包括all、screen、print、speech及媒体查询如(max-width: 600px)；3. 可组合多条件如screen and (min-width: 768px) and (max-width: 1024px)，实现按设备精准加载；4. 实际应用建议分离打印样式、针对高分辨率屏加载专用CSS、延迟非关键资源，并配合响应式设计拆分文件，减少无效请求，提升性能。
通过 link 标签的 media 属性，可以控制 CSS 文件在特定条件下加载，从而优化页面性能和响应式体验。浏览器只会对符合 media 条件的样式表进行下载和应用，不匹配的设备或视口可能跳过加载或延迟处理。
1. 基本语法与作用
在 HTML 中使用 link 标签引入 CSS 时，添加 media 属性可指定该样式表适用于哪些设备或屏幕条件：
<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">上面代码表示：只有当设备是屏幕（非打印）且视口宽度 ≥768px 时，才会加载 style.css。如果条件不满足，浏览器通常不会下载该文件（现代浏览器行为），节省带宽和加载时间。
2. 常见 media 值用法
media 属性支持多种媒体类型和查询条件，常用如下：
立即学习“前端免费学习笔记（深入）”；
- media="all"：适用于所有设备（默认值）
- media="screen"：仅屏幕设备（电脑、手机等）
- media="print"：仅打印预览或打印时加载
- media="speech"：供屏幕阅读器等语音合成器使用
- media="(max-width: 600px)"：仅在视口 ≤600px 时加载
- media="screen and (orientation: landscape)"：横屏设备
示例：为打印单独提供样式，避免浪费主资源流量
<link rel="stylesheet" href="print.css" media="print">
3. 多条件与性能优化
你可以组合多个条件，实现更精细的控制：
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1024px)">这种写法确保 tablet.css 只在平板尺寸范围内加载。对于移动端优先策略，可先加载基础样式，再按需加载大屏增强样式。
注意：若 media 条件一开始不满足（如小屏设备加载大屏 CSS），浏览器通常不会请求该文件，直到窗口缩放触发媒体查询变化时才可能加载（部分浏览器支持动态加载）。
4. 实际应用场景建议
- 将打印样式独立分离，使用 media="print"，避免影响首屏渲染
- 针对高分辨率屏幕加载专用样式：
media="screen and (-webkit-min-device-pixel-ratio: 2)" - 延迟非关键 CSS：结合 preload 或 JavaScript 动态插入，进一步控制加载时机
- 配合响应式设计，拆分 small.css、large.css，按需加载
基本上就这些。合理使用 media 属性能有效减少不必要的资源请求，提升加载速度和用户体验。关键是根据设备特性精准定义加载条件，避免过度拆分造成维护困难。
