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