如何在CSS中实现条件加载不同样式_通过media或@supports控制加载

在CSS中实现条件加载不同样式，可以通过 @media 和 @supports 规则来控制样式的应用条件。它们不会真正“延迟加载”CSS文件，但能根据设备特性或浏览器支持情况决定是否应用某段样式，从而实现逻辑上的“条件加载”。

使用 @media 根据设备特性加载样式

@media 用于根据设备的视口尺寸、分辨率、屏幕方向等媒体特征来应用不同的样式。这是响应式设计的核心手段。

例如，为不同屏幕宽度设置不同布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  .container {
    flex-direction: row;
  }
}

你也可以加载特定设备的样式：

• 仅在打印时应用样式：@media print { ... }
• 适配深色模式：@media (prefers-color-scheme: dark) { ... }
• 高分辨率屏幕优化：@media (-webkit-min-device-pixel-ratio: 2) { ... }

使用 @supports 检测浏览器功能支持

@supports 允许你根据浏览器是否支持某个CSS特性来决定是否应用样式，适合渐进增强策略。

例如，只在支持 display: grid 的浏览器中启用网格布局：

@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

还可以组合判断：

• 支持多个属性：@supports (display: grid) and (gap: 10px) { ... }
• 取反判断（降级处理）：@supports not (display: grid) { ... }

结合外部CSS实现“按需加载”

虽然CSS本身不支持动态导入文件的“if语句”，但你可以通过HTML中的 media 属性实现外部样式表的条件加载：

这样，浏览器只会下载满足条件的CSS文件，真正实现资源的按需加载。

基本上就这些。通过合理使用 @media 和 @supports，既能保证兼容性，又能为现代浏览器提供更优的视觉体验。