CSS计量单位

发表于 分类于 不明生物：

我们很容易无法摆脱的使用我们所熟悉的CSS技术，当新的问题出现，这样会使我们处于不利的地位。

随着Web继续的发展，对新的解决方案的需求也会继续增大。因此，作为网页设计师和前端开发人员，我们别无选择，只有去了解我们的工具集并且熟悉它。

这意味着我们还要了解一些特殊的工具-那些不经常使用的，但是当需要它们的时候，它们恰恰是最正确的工具。

今天，我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位，就像像素或者相对单位,但是很可能你从来没听说过它们！让我们一探究竟吧。

rem

我们将从你已经熟悉的东西开始。em单位被定义为当前字体大小。例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div class="test">Test</div>
</body>

<style>
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
</style>

在这里，我们说这个div将有一个1.2em的font-size。它是所继承的字体大小的1.2倍，在这个例子中为14px。结果为16.8px.

但是，当你在每个元素内都级联em定义的字体大小将会发生什么？在下面的代码片段中我们应用和上面一模一样的CSS.每个div从它们的父节点继承字体大小，带给我们逐渐增加的字体大小。

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“代表”root“；这等同于font-size基于根元素进行设置；在大多数情况下根元素为html元素。

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

在上一个示例中三个嵌套的div的字体大小计算结果都为16.8px。

对网格布局的好处

rem不是只对定义字体大小有用。比如，你可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上,然后在特定的地方使用em比例缩放。这将带给你更加可预测的字体大小和比例缩放。

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

从概念上讲，像这样一个策略背后的想法是为了允许你的界面随着你的内容按比例缩放。然而，这可能不一定对每个案例都有意义。

“rem(root em)单位”的兼容性列表。

vh 和 vw

响应式网页设计技术很大程度上依赖于比例规则。然而，CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样？这正是vh和vw单位所提供的。

vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

这些规则表面上看起来有无尽的用途。例如，做一个占满高度的或者接近占满高度的幻灯片，可以用一个非常简单的方法实现，只要用一行CSS：

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

设想你想要一个占满屏幕宽度的标题。为做到这一点，你将会用vw来设置一个字体大小。这个大小将会随着浏览器的宽度按比例缩放。

视窗单位: vw, vh的兼容性列表。

vmin 和 vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

所以你什么时候可能用到这些值？

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如，一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的：

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

vmin

如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。

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

vmax

这些规则的组合提供了一个非常灵活的方式，用新的、令人兴奋的方式利用你的可视窗口的大小。

Viewport units: vmin, vmax兼容列表。

ex 和 ch

ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的法案。

ch单位，或者字符单位被定义为0字符的宽度的“先进的尺寸”。在“Eric Meyer’s的博客”中可以找到一些非常有趣的讨论关于这意味着什么，但是基本的概念是，给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关，但是这里创造性的可行性一定会超越这些简单的用途。

ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。

ex

x-height: 小写字母x的高度(阅读更多关于The Anatomy of Web Typography)

对于这种单位有很多的用途，大多数是用于排版的微调。例如，sup元素,代表_上标_，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的vertical-align规则，但是如果你想要更精细的控制，你可以像这样更明确的处理样式：

1
2
3
4
5
6
7
8
sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

ex单位在CSS1中已经存在，但是你不会找到对ch单位有像这样坚实的支持。具体支持，在Eric Meyer’s 的博客中查看CSS单位和值。

结论

密切关注CSS的持续发展和扩张是非常重要的，一边在你的工具集里知道所有的工具。也许你会遇到一个特殊的问题需要一个意想不到的解决方案，利用这些更隐蔽的计量单位之一。花时间去阅读新规范，记录来自好的资源的新闻资讯！

扩展

本文根据@Jonathan Cutrell的《7 CSS Units You Might Not Know About》所译。

关注作者公众号,获取更多资源!
赏作者一杯咖啡~