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
使用相同的单位, 但是要响应特定的规则:
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 to1vh
. If the width of the browser is less than it’s height,1vmin
is equvialent to1vw
.vmin
使用最小边的比率。 也就是说,如果浏览器窗口的高度 小于其宽度 ,则1vmin
将等于1vh
。 如果浏览器的宽度小于它的高度 ,1vmin
是equvialent到1vw
。vmax
is the opposite: it uses the largest side. So1vmax
is equivalent to1vw
if the viewport is wider than it is tall; if the browser is taller than it is wide,1vmax
will be equivalent to1vh
.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
单位开头的合理大小的文本在极大或相对较小的视口大小下很快会失控:
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
有几件事要注意:
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”修复程序,可以解决该问题。
IE9 uses
vm
to representvmin
, and does not supportvmax
. 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