面试题：CSS变量在布局中的应用

Question

请描述如何使用CSS变量来实现一个响应式布局，其中不同屏幕尺寸下的元素间距和字体大小能够根据变量动态调整。给出具体的CSS代码示例，包括如何定义变量、如何在不同媒体查询中修改变量值以及如何在元素样式中使用变量。

Answer 1

1. 定义CSS变量： 在:root伪类中定义CSS变量，这样可以在整个文档范围内使用。例如，定义元素间距变量--spacing和字体大小变量--font-size：

   :root {
       --spacing: 16px;
       --font - size: 14px;
   }
   

2. 在不同媒体查询中修改变量值： 使用媒体查询根据不同的屏幕尺寸修改变量值。例如，当屏幕宽度大于等于768px时，调整变量：

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

   当屏幕宽度大于等于1200px时，再次调整变量：

   @media (min - width: 1200px) {
       :root {
           --spacing: 32px;
           --font - size: 18px;
       }
   }
   

3. 在元素样式中使用变量： 例如，假设有一个.box类的元素，要使用定义的变量设置其边距和字体大小：

   .box {
       margin: var(--spacing);
       font - size: var(--font - size);
   }
   

完整代码示例如下：

:root {
    --spacing: 16px;
    --font - size: 14px;
}

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

@media (min - width: 1200px) {
    :root {
        --spacing: 32px;
        --font - size: 18px;
    }
}

.box {
    margin: var(--spacing);
    font - size: var(--font - size);
}