通过link标签的media属性可实现多条件CSS加载。1. 按媒体类型适配设备，如screen、print、移动端宽度；2. 依prefers-color-scheme自动切换主题；3. 针对高分辨率屏幕加载hd样式；4. 组合and、not等逻辑精准控制加载条件，提升性能与体验。
在HTML中通过 标签引入CSS文件时，可以根据不同条件加载特定的样式表，实现多设备、多场景下的样式适配。这种方式灵活且高效，常用于响应式设计、主题切换和浏览器兼容处理。
1. 按媒体类型（media）选择样式
使用 media 属性可以根据设备特性加载对应的CSS文件，比如屏幕宽度、分辨率、设备方向等。
常见用法包括：-
—— 适用于普通屏幕 -
—— 打印时使用 -
—— 屏幕小于等于768px时加载 -
—— 大屏设备使用 -
—— 横屏时生效
2. 按主题或用户偏好加载样式
现代浏览器支持通过 prefers-color-scheme 等媒体查询检测系统设置，实现深色/浅色主题自动切换。
示例：页面会根据用户系统的外观偏好自动应用对应的主题样式，无需JavaScript干预。
立即学习“前端免费学习笔记（深入）”；
3. 条件加载高分辨率样式
针对高清屏幕（如Retina），可单独引入优化样式的CSS文件。
例如：
这样可以为高像素密度屏幕提供更精细的视觉效果，同时避免普通设备加载冗余资源。
4. 组合条件实现精准控制
media属性支持逻辑组合，使用 and、not、only 构建复杂条件。
实例：这类写法适合需要多重匹配的场景，提升样式应用的精确度。
基本上就这些。通过合理使用 的 media 属性，可以在不依赖JavaScript的情况下实现多样化的样式加载策略，既提升性能又增强用户体验。不复杂但容易忽略细节，建议结合实际需求测试各种条件表达式的效果。
