通过@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特性来决定是否应用样式，适合渐进增强策略。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

例如，只在支持 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，既能保证兼容性，又能为现代浏览器提供更优的视觉体验。