vmin的简单小用例

视口单位是10vw（视口宽度的10％）或2vh（视口高度的2％）。 有时有用，因为它们总是相对于视口。 没有父元素的级联或影响。

还有vmin，这是vw和vh中的较小者，而vmax是较大的。 这些值可用于需要长度值的任何值，例如px或em或％或其他值。

让我们看一下使用vmin的微小设计模式。

标头块！

如果像这样设置<header>的padding ：

header {
  padding: 10vmin 1rem;
}

我们在外部获得了一些固定的填充（1rem），因此，例如在其中设置的文本实际上不会触及边缘。 我们还获得了一个标题，该标题根据屏幕的实际情况以合适的方式自行调整大小。

大型，负责大型桌面视图。

当垂直空间较少时，它会缩短，因此不会妨碍内容。

人像移动视图似乎平衡。

小屏幕风景

超高而狭窄的感觉仍然不错。 并不是仅将视口高度单独考虑在内。

基于两个浏览器窗口尺寸中最小值的大小似乎是正确的，而不是仅仅基于宽度或高度。

这是演示。

这是一个视频：

翻译自: https://css-tricks.com/simple-little-use-case-vmin/