编辑“︁CSS变量媒体查询”︁

= 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：基础用法 ===
以下代码演示如何根据屏幕宽度调整主色调：
<syntaxhighlight lang="css">
:root {
  --primary-color: blue; /* 默认值 */
}

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

body {
  background-color: var(--primary-color);
}
</syntaxhighlight>
'''效果'''：
* 屏幕宽度 > 600px：背景为蓝色
* 屏幕宽度 ≤ 600px：背景为红色

== 实际应用场景 ==
=== 案例1：响应式间距系统 ===
通过变量统一管理不同设备的间距：
<syntaxhighlight lang="css">
:root {
  --spacing-unit: 8px;
}

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

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

=== 案例2：暗黑模式切换 ===
结合`prefers-color-scheme`媒体查询实现主题切换：
<syntaxhighlight lang="css">
: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);
}
</syntaxhighlight>

== 高级技巧 ==
=== 1. 变量级联 ===
媒体查询中的变量修改遵循CSS级联规则：
<mermaid>
graph TD
  A[全局变量定义] --> B[媒体查询修改]
  B --> C[最终使用值]
</mermaid>

=== 2. 数学计算 ===
使用`calc()`实现动态值：
<syntaxhighlight lang="css">
:root {
  --base-size: 16px;
}

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

h1 {
  font-size: calc(var(--base-size) * 2);
}
</syntaxhighlight>

=== 3. 变量作为媒体查询条件 ===
通过JavaScript动态更新变量实现更复杂的响应逻辑：
<syntaxhighlight lang="javascript">
document.documentElement.style.setProperty('--viewport-width', window.innerWidth + 'px');
</syntaxhighlight>

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

== 数学表达示例 ==
当需要根据视口比例计算值时，可使用公式：
<math>
\text{--responsive-margin} = \left(\frac{\text{--base-margin} \times \text{viewport-width}}{100}\right)
</math>

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS自定义属性]]