通过@media和@supports实现CSS条件加载，@media根据设备特性如屏幕宽度、打印模式、深色主题等应用样式，@supports检测浏览器对CSS特性的支持情况以实现渐进增强，结合HTML中link标签的media属性可按需加载外部样式文件，提升性能与兼容性。
在CSS中实现条件加载不同样式，可以通过 @media 和 @supports 规则来控制样式的应用条件。它们不会真正“延迟加载”CSS文件，但能根据设备特性或浏览器支持情况决定是否应用某段样式，从而实现逻辑上的“条件加载”。
使用 @media 根据设备特性加载样式
@media 用于根据设备的视口尺寸、分辨率、屏幕方向等媒体特征来应用不同的样式。这是响应式设计的核心手段。
例如，为不同屏幕宽度设置不同布局：
<font face="Consolas, 'Courier New', monospace">
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 769px) {
.container {
flex-direction: row;
}
}
</font>
你也可以加载特定设备的样式：
立即学习“前端免费学习笔记（深入）”；
- 仅在打印时应用样式：
@media print { ... } - 适配深色模式：
@media (prefers-color-scheme: dark) { ... } - 高分辨率屏幕优化：
@media (-webkit-min-device-pixel-ratio: 2) { ... }
使用 @supports 检测浏览器功能支持
@supports 允许你根据浏览器是否支持某个CSS特性来决定是否应用样式，适合渐进增强策略。
例如，只在支持 display: grid 的浏览器中启用网格布局：
<font face="Consolas, 'Courier New', monospace">
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
</font>
还可以组合判断：
- 支持多个属性：
@supports (display: grid) and (gap: 10px) { ... } - 取反判断（降级处理）：
@supports not (display: grid) { ... }
结合外部CSS实现“按需加载”
虽然CSS本身不支持动态导入文件的“if语句”，但你可以通过HTML中的 media 属性实现外部样式表的条件加载：
<font face="Consolas, 'Courier New', monospace"> <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="(min-width: 769px)"> <link rel="stylesheet" href="print.css" media="print"> </font>
这样，浏览器只会下载满足条件的CSS文件，真正实现资源的按需加载。
基本上就这些。通过合理使用 @media 和 @supports，既能保证兼容性，又能为现代浏览器提供更优的视觉体验。
