解锁动态样式：CSS变量的实战妙用

—— 告别硬编码的响应式设计新思路

痛点：传统CSS的硬编码困境

传统响应式设计中，我们常为不同设备编写重复的媒体查询：

@media (max-width: 768px) {
   
  .card {
    padding: 8px; }
  .title {
    font-size: 16px; }
}
/* 每新增断点需重复修改所有属性 */

解决方案：CSS变量 + 媒体查询

定义动态属性值，通过变量实现 一处修改，全局生效：

:root {
   
  --card-padding: 12px;
  --title-size: 18px;
}

@media (max-width: 768px) {
   
  :root {
   
    --card-padding: 8px; /* 仅修改此处 */
    --title-size: 16px;
  }
}

.card {
    padding: var(--card-padding); }
.title {
    font-size: var(--title-size); }

进阶技巧：与JavaScript联动

动态切换主题色无需重写CSS：

// JS控制变量值
document.documentElement.style.setProperty('--primary', '#6a11cb');

/* CSS直接引用 */
button {
   
  background: var(--primary);
}

性能优势实测

实战场景：动态间距系统

/* 定义间距尺度 */
:root {
   
  --space-unit: 8px;
  --space-sm: calc(var(--space-unit) * 0.5);
  --space-md: calc(var(--space-unit) * 1);
}

/* 组件中使用 */
.card {
   
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
}

浏览器支持与回退方案

支持率：全球95%（IE除外）
安全回退写法：

.title {
   
  font-size: 16px; /* 旧浏览器回退值 */
  font-size: var(--title-size, 16px);
}

核心价值：CSS变量将样式从“静态配置”升级为“动态参数系统”，大幅提升代码复用率与可维护性。

延伸思考：
如何用CSS变量实现「用户自定义主题保存」？欢迎分享你的实现方案！