CSS：7个你可能不认识的单位

拼搏现实的明天。 2022-08-06 00:14 159阅读 0赞

原文：[7 CSS Units You Might Not Know About][]

众所周知，当使用CSS技术的时候，很容被一些奇异问题给困住。而当我们面对新的问题时，这会让我们处于非常不利的位置。

但是，伴随着Web的发展，新的解决方案也在慢慢成熟。因此，作为一个Web设计和前端开发人员，除了对我们使用的工具或属性非常了解并能熟练运用，已经别无选择了。

这也意味着，对于那些特别的工具或属性，即使平常很少使用，但是当需要的时候，我们也能很好的把它运用到工作中。

今天，我就介绍一些你之前可能不知道的CSS 属性，是一些例如px和ems测量方面的单位，但是很有可能你之前都没听过这些。一起来看看吧。

**rem**

从与我们已经熟悉的但很相似的单位开始介绍。em被定义为相对于当前对象内文本的字体大小。如果你给body元素设置了一个字体大小，那么body的任何子元素的em值都等于body设置的font-size。

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一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。

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

html {
        font-size: 14px;
    }
    div {
        font-size: 1.2rem;
    }

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

**适用于网格布局**

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

.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代码就实现同屏幕等高的框。

.slide {
        height: 100vh;
    }

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

[demo][]

**vmin和vmax**

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

那么什么时候需要这些值呢？

假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。例如，可以这样定义一个至少有两个边触摸到屏幕的方形：

.box {
        height: 100vmin;
        width: 100vmin;
    }

![77c5e245888a13d0e5722d5051d8665e.png][]

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

.box {
        height: 100vmax;
        width: 100vmax;
    }

![c9921f0c2f7c7f67b0c66b4742e796b9.png][]

结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。

**ex和ch**

单位ex和ch，就跟em和rem类似，取决于当前的字体和字体大小。然而，跟em和rem不同的是，ex和ch是基于字体的度量单位，依赖于设定的字体。

单位ch通常被定义为数字0的宽度。你可以在[Eric Meyers的博客][Eric Meyers]里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

单位ex定义为当前字体的小写x的高度或者1/2的em。很多时候，它是字体的中间标志。

![13847ae6408e1dbbe1cc6e6b278f2688.png][]

x-height; the height of the lower case x（read more about [ The Anatomy of Web Typography][The Anatomy of Web Typography]）

他们有很多的用途，但是大部分用于版式的微调。比如，sup元素（上角标字符），可以利用`position:relative;bottom: 1ex;`实现，同理，可以实现一个下角标文字。浏览器默认的处理方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

sup {
        position: relative;
        bottom: 1ex;
    }
    sub {
        position: relative;
        bottom: -1ex;
    }

**总结**

持续关注CSS的发展和扩展是非常重要的，这样你才能熟练运用你工具箱中特定的工具。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的[技术规范][Link 1]，注册订阅一些不错的网站或者资源，类似 **[cssweekly][]**这样的。 当然不要忘记现在就去注册像[Tuts+][Tuts]这样的网站来获取每周的更新，课程，免费教程还有资源！

**扩展阅读**

More CSS unit goodness.

*  [Taking the “Erm..” Out of Ems][Taking the _Erm.._ Out of Ems]
 *  [Taking Ems Even Further][]
 *  [Caniuse Viewport units][]

原文首发：[http://www.ido321.com/1301.html][7 CSS Units You Might Not Know About]

下一篇：[HTML 5：你必须知道的data属性 ][HTML 5_data_]

[7 CSS Units You Might Not Know About]: http://www.ido321.com/1301.html
[demo]: https://codepen.io/snaptin/embed/yorbI
[77c5e245888a13d0e5722d5051d8665e.png]: http://ido321.qiniudn.com/qiniu/1301/image/77c5e245888a13d0e5722d5051d8665e.png
[c9921f0c2f7c7f67b0c66b4742e796b9.png]: http://ido321.qiniudn.com/qiniu/1301/image/c9921f0c2f7c7f67b0c66b4742e796b9.png
[Eric Meyers]: http://meyerweb.com/eric/thoughts/2012/05/15/defining-ch/
[13847ae6408e1dbbe1cc6e6b278f2688.png]: http://ido321.qiniudn.com/qiniu/1301/image/13847ae6408e1dbbe1cc6e6b278f2688.png
[The Anatomy of Web Typography]: https://webdesign.tutsplus.com/articles/the-anatomy-of-web-typography--webdesign-10533
[Link 1]: http://www.w3.org/TR/css3-values/
[cssweekly]: http://css-weekly.com/
[Tuts]: https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Ftutsplus.com%2Faccount%2Femail_preference%2Fedit
[Taking the _Erm.._ Out of Ems]: https://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems--webdesign-12321
[Taking Ems Even Further]: https://webdesign.tutsplus.com/articles/taking-ems-even-further--webdesign-12543
[Caniuse Viewport units]: http://caniuse.com/#feat=viewport-units
[HTML 5_data_]: http://www.ido321.com/1304.html