CSS变量媒体查询[编辑 | 编辑源代码]

CSS变量媒体查询（CSS Custom Properties Media Queries）是一种将CSS自定义属性（变量）与媒体查询结合使用的技术，允许开发者根据设备特性（如屏幕宽度、分辨率等）动态调整CSS变量的值，从而实现更灵活的响应式设计。

介绍[编辑 | 编辑源代码]

CSS自定义属性（也称为CSS变量）通过`--variable-name`语法定义，可在整个样式表中复用。结合媒体查询（`@media`），开发者可以基于不同设备条件修改变量值，而无需重复编写大量样式规则。这种技术简化了响应式设计的实现，并提升了代码的可维护性。

语法基础[编辑 | 编辑源代码]

CSS变量媒体查询的核心语法包括： 1. 定义变量：`--variable-name: value;` 2. 使用变量：`property: var(--variable-name);` 3. 在媒体查询中修改变量值： ```css @media (条件) {

 :root {
   --variable-name: new-value;
 }

} ```

示例1：基础用法[编辑 | 编辑源代码]

以下代码演示如何根据屏幕宽度调整主色调：

:root {
  --primary-color: blue; /* 默认值 */
}

@media (max-width: 600px) {
  :root {
    --primary-color: red; /* 小屏幕时修改为红色 */
  }
}

body {
  background-color: var(--primary-color);
}

效果：

屏幕宽度 > 600px：背景为蓝色
屏幕宽度 ≤ 600px：背景为红色

实际应用场景[编辑 | 编辑源代码]

案例1：响应式间距系统[编辑 | 编辑源代码]

通过变量统一管理不同设备的间距：

:root {
  --spacing-unit: 8px;
}

@media (min-width: 768px) {
  :root {
    --spacing-unit: 16px;
  }
}

.card {
  padding: calc(var(--spacing-unit) * 2);
}

案例2：暗黑模式切换[编辑 | 编辑源代码]

结合`prefers-color-scheme`媒体查询实现主题切换：

:root {
  --text-color: #333;
  --bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #eee;
    --bg-color: #121212;
  }
}

body {
  color: var(--text-color);
  background: var(--bg-color);
}

高级技巧[编辑 | 编辑源代码]

1. 变量级联[编辑 | 编辑源代码]

媒体查询中的变量修改遵循CSS级联规则：

2. 数学计算[编辑 | 编辑源代码]

使用`calc()`实现动态值：

:root {
  --base-size: 16px;
}

@media (max-width: 480px) {
  :root {
    --base-size: 14px;
  }
}

h1 {
  font-size: calc(var(--base-size) * 2);
}

3. 变量作为媒体查询条件[编辑 | 编辑源代码]

通过JavaScript动态更新变量实现更复杂的响应逻辑：

document.documentElement.style.setProperty('--viewport-width', window.innerWidth + 'px');

注意事项[编辑 | 编辑源代码]

浏览器支持：CSS变量支持所有现代浏览器（IE除外）
性能影响：过度使用可能导致重绘次数增加
命名规范：建议使用语义化命名（如`--color-primary`而非`--color1`）

数学表达示例[编辑 | 编辑源代码]

当需要根据视口比例计算值时，可使用公式： $--responsive-margin = (\frac{--base-margin \times viewport-width}{100})$

总结[编辑 | 编辑源代码]

CSS变量媒体查询通过将动态逻辑与设计系统分离，显著提升了响应式开发的效率。初学者可以从简单的颜色/尺寸切换开始，逐步掌握复杂场景下的应用。高级用户则可利用其与JavaScript的交互能力，构建高度动态的界面系统。