CSS中的单位

发表于 | 分类于 | 次

CSS中的单位

em

em被定义为相对于当前对象内文本的字体大小。如果你给body元素设置了一个字体大小，那么body的任何子元素的em值都等于body设置的font-size。

1
2
3
4
5
6
7
8
9
<body>
    <div class="test">Test</div>
</body>
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

div中的字体大小是1.2em，也就是div从父类元素继承的字体大小的1.2倍。在这里，body的字体是14px，那么div的字体大小是1.2*14 = 16.8px

但是，如果你用em一层一层级联地定义嵌套元素的字体大小又会发生什么事情呢？

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时，就因该用rem了，rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下根元素就是html了。

1
2
3
4
5
6
html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

这样在上面的那三个嵌套的div的字体大小都是1.2 * 14px = 16.8px了。

适用于网格布局

rem不仅适用于字体大小，也用于网格布局。例如，你可以用基于HTML根元素字体大小的rem作为整个网络布局或者UI库的大小单位，然后在其它特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性。

1
2
3
.container {
    width: 70rem;   //  70 * 14px = 980px
}

vh和vw

响应式web设计对百分比规则有很大的依赖性。然而，对于每一个问题，css百分比并不是最好的解决方案。CSS宽度是相对于包含它的最近的父元素的宽度的。如果你想使用的是视口的高度与宽度，而不是父元素的，那么vh和vw就能满足需求了。

1vh等于1%的视口高度。例如，浏览器高度是900px，那么1vh = 900* 1% = 9px，同理，若视口宽度是750px，则1vw是7.5px。
它的用途很广泛。比如，我们用很简单的方法只用一行css代码就实现同屏幕等高的框。

1
2
3
.slide{
    height: 100vh;
}

假如你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vw，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。

vmin和vmax

vh和vw是相对于视口的宽度和高度，而vmin和vmax则关于视口高度和宽度两者的最小或者最大值。例如，如果浏览器的高宽分别为700px和1100px，则1vmin=7px, 1vmax=11px；如果高宽分别是1080px和800px，则1vmin=8px，1vmax = 10.8px。

那么什么时候需要这些值呢？
假设有一个元素，你需要让他始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到。

1
2
3
4
.box {
    height: 100vmin;
    width: 100vmin;
}

如果你要让这个方框始终铺满整个视口的可见区域（四边始终触摸到屏幕的四边）：

1
2
3
4
.box{
    height: 100vmax;
    width: 100vmax;
}