重学CSS之相对单位（二）

1、视口的相对单位

上一篇文章介绍的em和rem都是相对于font-size定义的，但CSS里不止有这一种相对单位。还有相对于浏览器视口定义长度的视口的相对单位。

视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。

如果你不熟悉视口的相对单位，请先看下面的简单介绍。

• **vh：**视口高度的1/100。
• **vw：**视口宽度的1/100。
• **vmin：**视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin，不过现在IE已经下架，可以忽略）。
• **vmax：**视口宽、高中较大的一方的1/100。

比如，50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。

视口相对长度非常适合展示一个填满屏幕的大图。我们可以将图片放在一个很长的容器里，然后设置图片的高度为100vh，让它等于视口的高度。

相对视口单位有一个不起眼的用途，就是设置字号。

1.1 使用vw定义字号

如果给一个元素加上font-size: 2vw会发生什么？在一个1200px的桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板上，计算值约为15px（768的2%）。然而这样还是会有一些问题，建议用下面的方法来定义。

1.2 使用calc()定义字号

calc()函数内可以对两个及其以上的值进行基本运算。

注：:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。

:root {
  font-size: calc(0.5em + 1vm);
}

0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。

这样就可以不用媒体查询就实现了大部分的响应式策略。省掉三四个硬编码的端点（即人为控制在何种媒体宽度下的显示），网页上的内容也能根据视口流畅地缩放。

2、无单位的数值和行高

有些属性允许无单位的值（即一个不指定单位的数）。支持这种值的属性包括line-height、z-index、font-weight（700等于bold,400等于normal，等等）。任何长度单位（如px、em、rem）都可以用无单位的值0，因为这些情况下单位不影响计算值，即0px、0%、0em均相等。

3、自定义属性（即CSS变量）

你可以声明一个变量，为它赋一个值，然后在样式表的其他地方引用这个值。这样不仅能减少样式表中的重复，而且还有其他好处，稍后会介绍。

:root {
    --main-font: Helvetica, Arial, sans-serif;
}

上述示例代码定义了一个名叫–main-font的变量。将其值设置为一些常见的sans-serif字体。变量名前面必须有两个连字符（–），用来跟CSS属性区分，剩下的部分可以随意命名。

调用函数var()就能使用该变量。利用该函数引用前面定义的变量–main-font。

:root {
    --main-font: Helvetica, Arial, sans-serif;
}

p {
    font-family: var(--main-font);
}

在样式表某处为自定义属性定义一个值，作为“单一数据源”，然后在其他地方复用它。这种方式特别适合反复出现的值，比如颜色值。在样式表中可以多次使用这个变量，当你想要改变这个颜色值时，只需要在一个地方修改即可。

:root {
    --main-font: Helvetica, Arial, sans-serif;
    --brand-color: #369;
}

p {
    font-family: var(--main-font);
    color: var(--brand-color);
}

var()函数接受第二个参数，它指定了备用值。如果第一个参数指定的变量未定义，那么就会使用第二个值。

在第一个声明里，因为–main-font被定义为Helvetica, Arial, sans-serif，所以使用了这个变量的值。在第二个声明里，因为–secondary-color是一个未定义的变量，所以使用了备用值blue。

:root {
    --main-font: Helvetica, Arial, sans-serif;
    --brand-color: #369;
}

p {
    font-family: var(--main-font, sans-serif);
    color: var(--secondary-color, blue);
}

如果var()函数算出来的是一个非法值，对应的属性就会设置为其初始值。比如，如果在padding: var(–brand-color)中的变量算出来是一个颜色，它就是一个非法的内边距值。这种情况下，内边距会设置为0。

3.1 动态改变自定义属性

在前面的示例中，自定义属性只不过为减少重复代码提供了一种便捷方式，但是它真正的意义在于，自定义属性的声明能够层叠和继承：可以在多个选择器中定义相同的变量，这个变量在网页的不同地方有不同的值。