理解CSS中的vMin和vMax

在以前浏览过的文章当中(点这查看)，我发现了很有用的CSS单位：vw和vh。但与其相关的单位vmin和vmax却远不为人知，且知之甚少。这是非常不幸的，因为在web开发当中，它们拥有一些非常新颖的用例。

正如我之前所讨论过的，1vh等于当前viewport高度（即打开浏览器窗口高度）的1%，而1vw则是当前viewport宽度的1%。vmin和vmax也使用相同的单位，但响应于特定的规则：

1. vim使用最小那边的比例。也就是说，如果浏览器窗口的高度小于他的宽时，1vmin将等价于1vh；如果浏览器的宽度小于他的高度时，1vmin等价于1vw。
2. vmax则相反：它使用最大的那一边。因此当viewport的宽大于高时，1vmax等价于1vw；如果浏览器的高大于宽时，1max将等价于1vh。

vim：使用视窗宽与高中的最小的那个。 vmax：使用视窗宽与高中的最大的那个。

它们能被用在什么地方？

vim和vmax是CSS方向媒体查询(@media screen and (orientation : portrait)或 @media screen and (orientation : landscape))的一个理想的替代品，或算是补充，因为它们会立即对屏幕宽高比做出响应。

保持Hero text在掌握之中（Keeping Hero Text Under Control）

我先前曾展示过《在头部文本中使用vw单位》，但这样做会出现一个显著的问题：一开始在合理的尺寸中vw单位的文本，在非常大或相对较小的视窗尺寸中会脱离控制：

<figure> <figcaption>vw尺寸的文本在手机屏幕尺寸中变得太小，在大屏尺寸中显示得太大。</figcaption> </figure>

一种解决方法是使用@media查询“clamps”以设置最小和最大的字体尺寸，复杂你的CSS。另一种方法是将头部的font-size值设置为vmin。

h1 {
  font-size: 20vmin;
  font-family: Avenir, sans-serif;
  font-weight: 900;
  text-align: center;
}

使用vmin单位时，在一个宽屏且正收缩的浏览器中，标题文字的尺寸将不会变得更大/小，因为该单位响应于viewport高度。但如果viewport变得比他的宽更窄时 —— 也就是说，如果页面进入竖屏时 —— 该文本将变得更大或更小，如相关CodePen demo中的演示。

在fold上保持特性 （Keeping Features Above The Fold）

起始于页面的顶部，且测量高度小于100vh时的一个特性，将永远显示“above the fold”（也就是说，它将永远停留在视窗口最低边缘的上方），但在部分宽高比中，它同样会显示不必要的大小。如果元素的min-height值使用vmax单位代替，他会在宽屏尺寸中显示合理的大小，且在窄视窗中显示相对较细：

header {
    background: #000;
    min-height: 8vmax;
}

它会与max-height结合，以限制在超大视窗尺寸中元素的高度。

潜在的问题

关于vmin和vmax，有几件事需要注意：

1. 手机Safari的支持中有几个历来都存在的bug（希望在即将到来的IOS 10中能得到解决）。Rodney Rehm有篇文章`《“buggyfill” fix for the browser》解决了这些问题。
2. IE9使用vm代替vmin，且不支持vmax。IE10+支持标准单位。

正如我希望你能看见的，vmin和vmax确实有些优秀的用途；我希望他们会在你的工作中发现适当的引用。

照片来自于Richard Fraser，在创作共用许可证（Creative Commons license）下使用。