答案：CSS中link标签的media属性可按设备类型和视口条件加载不同样式表。1. 通过screen、print等值为打印机、屏幕等设备加载特定样式；2. 支持媒体查询语法，根据宽度、分辨率等适配响应式布局；3. 利用惰性加载提升性能，非关键样式不阻塞渲染；4. 使用and、or等逻辑符组合条件实现精准控制。合理使用可优化体验与性能。
在CSS中，link标签的media属性可以帮助我们根据设备类型或视口条件加载不同的样式表。合理使用media属性，可以让网页在不同设备上呈现最佳视觉效果，同时提升性能和用户体验。
1. 按设备类型选择样式
通过设置media属性，可以为不同设备加载特定的CSS文件。比如为打印机、屏幕、触屏设备等提供定制样式。
常见取值包括：示例：
<link rel="stylesheet" href="print.css" media="print">这样，print.css只在用户打印页面时生效，不会影响页面渲染性能。
立即学习“前端免费学习笔记（深入）”；
2. 使用媒体查询适配响应式布局
media属性支持完整的媒体查询语法，可以根据视口宽度、分辨率、方向等条件动态加载CSS。
常用场景：- 为小屏幕设备加载轻量样式
- 为高分辨率屏幕加载高清图片样式
- 横屏/竖屏切换时调整布局
示例：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">浏览器会根据当前视口宽度选择性加载对应文件，避免不必要的资源浪费。
3. 提升页面加载性能
利用media属性的“惰性加载”特性，可以让某些CSS文件延迟解析，从而加快首屏渲染速度。
技巧：- 将非关键样式（如打印样式）的media设为非匹配条件，如
media="print"，浏览器会将其标记为低优先级 - 配合
rel="preload"预加载关键CSS，其他用media控制按需加载
例如：
<link rel="preload" href="critical.css" as="style"> <link rel="stylesheet" href="wide-layout.css" media="(min-width: 1024px)">在小屏幕上，wide-layout.css不会阻塞渲染，提升加载效率。
4. 组合条件实现精准控制
media属性支持逻辑操作符and、or、not，可构建复杂条件判断。
这个样式表只在宽屏、横屏且高DPR的设备上加载，确保资源精准投放。
基本上就这些。灵活运用link标签的media属性，能有效实现样式分离、提升性能，并让网页更好地适应多样化的设备环境。不复杂但容易忽略细节，建议结合实际项目多尝试。
