CSS自定义属性 —— 别说你懂CSS相对单位

2023-09-12 18:56:00

很多开发者在用到CSS自定义属性的时候往往被CSS相对单位搞得晕头转向，各种单位配合使用，经常让人产生疑问，这个自定义属性到底是怎么工作的？怎么跟相对单位配合？不同单位配合使用的时候又是怎么计算的？我猜可能很多人都遇见过这种情况，今天就让我们一起来探究一下CSS自定义属性，并通过对比CSS相对单位的方式来加深理解。

1. CSS 自定义属性：CSS Variables

CSS自定义属性又称为CSS变量，它允许我们定义可重用的变量，并可以在样式表或HTML元素中使用。自定义属性的优点在于，我们可以通过一个变量来控制多个元素的样式，从而实现样式的全局一致性。

:root {
  --primary-color: #ff0000;
}

h1 {
  color: var(--primary-color);
}

p {
  color: var(--primary-color);
}

上面的代码中，我们在<root>元素中定义了一个名为--primary-color的自定义属性，并将其值设置为红色。然后，我们可以在h1和<p>元素中使用var(--primary-color)来获取这个值，从而将它们的文本颜色设置为红色。

2. CSS 相对单位

CSS相对单位是相对于其他单位（如像素、百分比等）的单位。常用的CSS相对单位包括：

百分比（%）：相对于父元素的宽度或高度。
em：相对于父元素的字体大小。
rem：相对于根元素的字体大小。
vw：相对于视口的宽度。
vh：相对于视口的高度。

3. CSS 自定义属性和相对单位的对比

CSS自定义属性和CSS相对单位都可以用来实现样式的全局一致性。然而，两者之间也存在一些关键的区别：

作用范围： CSS自定义属性的作用范围是整个文档，而CSS相对单位的作用范围只限于其父元素。
继承性： CSS自定义属性是可继承的，而CSS相对单位是不可继承的。
计算方式： CSS自定义属性的值是直接应用到元素上，而CSS相对单位的值需要先转换成绝对单位，然后才能应用到元素上。

4. 如何将CSS自定义属性和相对单位结合使用

CSS自定义属性和相对单位可以结合使用，以实现更灵活的样式控制。例如，我们可以使用CSS自定义属性来定义一个字体大小变量，然后使用CSS相对单位来调整元素的字体大小。

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

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

p {
  font-size: calc(var(--font-size) * 0.8);
}

上面的代码中，我们在<root>元素中定义了一个名为--font-size的自定义属性，并将其值设置为16像素。然后，我们可以在h1和<p>元素中使用calc()函数来调整元素的字体大小。h1元素的字体大小是var(--font-size) * 1.5，即16像素的1.5倍，即24像素；<p>元素的字体大小是var(--font-size) * 0.8，即16像素的0.8倍，即12.8像素。