星途面试题库

面试题：CSS变量的使用场景及语法

请阐述CSS变量的常见使用场景，并写出定义和使用CSS变量的基本语法。同时举例说明如何通过媒体查询改变CSS变量的值以实现响应式设计。

27.3万热度

难度

前端开发CSS

知识考点

AI 面试

面试题答案

CSS变量常见使用场景

全局样式管理：通过定义全局的CSS变量，如主色调、字体大小等，可以方便地在整个项目中复用，并且修改一处即可改变全局效果。例如，网站的主题色在多个元素上使用，修改主题色时只需修改变量的值。
动态样式切换：借助JavaScript可以动态修改CSS变量的值，实现元素样式的动态变化，比如切换主题（白天/黑夜模式）。
响应式设计：配合媒体查询，根据不同的屏幕尺寸调整CSS变量的值，从而改变页面布局和样式。

定义和使用CSS变量的基本语法

定义变量：在CSS中，使用--变量名: 值;的形式定义变量。变量名通常使用小写字母和连字符的组合，例如：

:root {
  --primary-color: blue;
  --font-size-base: 16px;
}

这里在:root选择器中定义变量，:root表示文档的根元素（对于HTML文档，就是<html>元素），这样定义的变量在整个文档范围内都可以使用。也可以在其他选择器内定义变量，其作用域为该选择器及其后代元素。 2. 使用变量：使用var(--变量名)的形式来引用变量，例如：

body {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}

通过媒体查询改变CSS变量的值以实现响应式设计示例

:root {
  --primary-font-size: 16px;
}

@media (min - width: 768px) {
  :root {
    --primary-font-size: 18px;
  }
}

@media (min - width: 1024px) {
  :root {
    --primary-font-size: 20px;
  }
}

body {
  font-size: var(--primary-font-size);
}

在上述代码中，通过媒体查询，当屏幕宽度达到768px及以上时，--primary-font-size变量的值变为18px；当屏幕宽度达到1024px及以上时，--primary-font-size变量的值变为20px。这样，body元素的字体大小会根据不同屏幕宽度做出响应式变化。