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 包裹新特性样式。
