vmin vs vmax_MinMaxing：了解CSS中的vMin和vMax

vmin vs vmax

I’ve covered the very useful vw and vh CSS units in a previous article, but the related vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the units have some truly novel use-cases in web development.

在上一篇文章中 ，我已经介绍了非常有用的vw和vh CSS单元 ，但是相关的vmin和vmax单元却鲜为人知，并且通常了解得很少。 这很不幸，因为这些部门在Web开发中有一些真正新颖的用例。

As I discussed earlier, 1vh is equal to 1% of the current viewport height (i.e. the open browser window), while 1vw is 1% of the current viewport width. vmin and vmax use those same units, but in response to particular rules:

正如我之前讨论的， 1vh等于当前视口高度(即打开的浏览器窗口)的1％，而1vw当前视口宽度的1％。 vmin和vmax使用相同的单位， 但是要响应特定的规则：

1. vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than it’s height, 1vmin is equvialent to 1vw.

   vmin使用最小边的比率。 也就是说，如果浏览器窗口的高度 小于其宽度 ，则1vmin将等于1vh 。 如果浏览器的宽度小于它的高度 ， 1vmin是equvialent到1vw 。

2. vmax is the opposite: it uses the largest side. So 1vmax is equivalent to 1vw if the viewport is wider than it is tall; if the browser is taller than it is wide, 1vmax will be equivalent to 1vh.

   vmax 相反 ：它使用最大的一面 。 因此， 如果视口的宽度大于高度， 则 1vmax等于1vw 。 如果浏览器的高度大于宽度，则1vmax等于1vh 。

它们是用来干什么的？ (What Are They Used For?)

vmin and vmax is an excellent substitute for, or addition to, CSS orientation media queries (@media screen and (orientation : portrait) or @media screen and (orientation : landscape)), since they respond immediately to the aspect ratio of the screen.

vmin和vmax是CSS定向媒体查询 ( @media screen and (orientation : portrait)或@media screen and (orientation : landscape) )的理想替代或补充，因为它们会立即响应屏幕的纵横比。

控制英雄文字 (Keeping Hero Text Under Control)

I’ve previously demonstrated vw units for header text, but doing so has a significant problem: text that starts at a reasonable size in vw units rapidly gets out of control at extremely large or relatively small viewport sizes:

我之前已经演示了用于标头文本的vw单位 ，但是这样做有一个严重的问题：以vw单位开头的合理大小的文本在极大或相对较小的视口大小下很快会失控：

vw sized text becomes too small at mobile viewport sizes, and too big at large monitor sizes.

在移动视口大小下， vw大小的文本变得太小，在大显示器尺寸下， vw大小的文本变得太大。

One solution is to apply @media query “clamps” to set the minimum and maximum font sizes, complicating your CSS. An alternative is to set the header font-size in vmin:

一种解决方案是应用@media查询“ clamp”来设置最小和最大字体大小，从而使CSS复杂化。 另一种方法是在vmin设置标题font-size ：

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

Measured in vmin, the size of the header text won’t get larger or smaller in a fully-expanded browser that is narrowed, since the unit responds to viewport height. But if the viewport becomes narrower than it is wide - in other words, if the page moves into a portrait orientation - the text will get larger or smaller, as shown in the related CodePen demo.

以vmin衡量，在缩窄的完全展开的浏览器中，标题文本的大小不会变大或变小，因为单元会响应视口高度。 但是，如果视口变窄而不是视口变宽 (换句话说，如果页面变为纵向)，则文本将变大或变小，如相关CodePen演示中所示 。

保持功能不变 (Keeping Features Above The Fold)

A feature starting at the top of the page and measured at less than 100vh in height will always appear “above the fold” (that is, it will always remain above the lowest edge of the viewport window), but it can also appear needlessly large in some aspect ratios. If the min-height of the element is measured in vmax instead, it can appear appropriately large at wide window size, and relatively thin on narrow viewports:

从页面顶部开始且高度小于100vh的功能将始终显示在“折叠上方”(也就是说，它将始终保持在视口窗口的最低边缘之上)，但也可能不必要地显得很大在某些方面的比例。 如果该元素的min-height是用vmax度量的，则在宽窗口尺寸下可能显得适当较大，而在窄视口上则相对较薄：

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

This could be combined with a max-height to restrict the height of the element at extra-large viewport sizes.

可以将其与max-height结合使用以限制超大视口尺寸时元素的高度。

潜在并发症 (Potential Complications)

There are a few things to be aware of in regards of vmin and vmax:

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

1. Support in Mobile Safari has historically had a few bugs (hopefully addressed and fixed in the upcoming iOS 10 release). Rodney Rehm has a `“buggyfill” fix for the browser that addresses the issues.

   过去，Mobile Safari的支持存在一些错误(希望在即将发布的iOS 10版本中解决并修复)。 Rodney Rehm 为浏览器提供了一个“ buggyfill”修复程序，可以解决该问题。

2. IE9 uses vm to represent vmin, and does not support vmax. Support from IE 10 up is standard.

   IE9使用vm表示vmin ，但不支持vmax 。 IE 10以上版本的支持是标准的。

As I hope you can see, vmin and vmax really do have some outstanding uses; I hope they’ll find appropriate application in your own work.

我希望您可以看到， vmin和vmax确实有一些出色的用途。 我希望他们会在您自己的工作中找到合适的应用程序。

翻译自: https://thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS

vmin vs vmax