CSS无if/else语句，条件样式靠@media、@supports和层叠优先级实现；@media响应视口宽度但不阻止下载，@supports检测特性支持以渐进增强，外部样式文件需用HTML的media属性或JS动态控制。
媒体查询不是条件语句，但能实现样式条件加载
CSS 本身没有 if、else 这类编程式条件语句，所谓“条件控制样式”，实际靠的是媒体查询（@media）、特性查询（@supports）和层叠优先级这三类机制。它们不执行逻辑判断，而是基于环境特征或浏览器能力声明规则是否生效。
常见误操作是试图写 @if (min-width: 768px) { ... } —— 这在原生 CSS 中会直接报错，属于 Sass/Less 等预处理器语法，不能直接用于 HTML 的 或 .css 文件中。
用 @media 响应不同视口宽度加载样式
这是最常用的方式，本质是“当满足某组媒体特性时，启用对应样式块”。它不阻止样式下载，但会控制规则是否生效。
-
@media规则里的样式仍会被浏览器解析和计算，只是匹配失败时不应用 - 多个
@media可以叠加，比如同时检查screen和min-width - 移动端优先建议写法：先写基础样式（小屏），再用
@media (min-width: 768px)覆盖大屏 - 避免嵌套过深的
@media，CSS 不支持嵌套，必须平级书写
示例：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.header { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.header { font-size: 16px; }
}
@media (min-width: 1024px) {
.header { font-size: 18px; }
}
用 @supports 检测浏览器是否支持某 CSS 特性
比媒体查询更底层，适合渐进增强：先写降级样式，再用 @supports 包裹新特性样式。
- 检测语法必须是完整声明，如
@supports (display: grid)，不能写@supports display: grid - 支持逻辑运算符：
and、or、not，例如@supports (display: grid) and (not (display: inline-grid)) - 注意括号必须成对，否则整条规则被忽略
- 某些旧版 Safari 对
@supports解析不一致，建议搭配feature queries兼容性数据验证
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
真正“按条件引入样式文件”只能靠 HTML 或 JS 控制
CSS 无法决定外部样式表是否加载，但你可以通过 HTML 的 标签属性或 JavaScript 动态插入来做到。
- 用
media属性让浏览器只在匹配时下载并应用： - 用
onload+onerror配合 JS 实现加载失败回退，或根据 URL 参数/设备类型动态创建 - 注意：带
media的仍会发起请求（现代浏览器优化后可能延迟），但不匹配时不会应用样式 - 服务端渲染场景下，也可由后端根据 User-Agent 注入不同
容易被忽略的一点：CSS 文件的加载顺序会影响层叠结果，即使 @media 匹配，后加载的同权重规则仍会覆盖先加载的。
