几个你可能不认识的CSS单位

最近在做 Web 前端相关的东西， 在阅读一些开源代码中， 发现 CSS 一些单位不认识， 在网上搜索一下， 今天在这里记录一下，做个笔记。

vh and vw

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。

1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。

可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

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

vmin and vmax

vh和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

那么问题来了，我们应该在什么场景下使用这两个单位呢？

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

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

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

ex and ch

ex 和 ch 单位，类似于 em 和 rem, 依赖于当前的字体和字体大小。 但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。

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

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

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

兼容性

浏览器的兼容情况如下： vw vh vmax vmin

IE8以下（包含IE8）不支持

在IE9中使用vm来代替vmin

IE10, IE11不支持vmax

其他主流浏览器都支持ff chrome safari Opera都支持

ex

PC浏览器都支持

ch

ie8 及以下不支持