vmin and vmax

vh和 vm 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 1px, 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了,我们应该在什么场景下使用这两个单位呢?
假设有一个元素,你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位,并赋予其低于100的值就可以做到了。再来个栗子,可以这样定义一个至少有两个边触摸到屏幕的方形:

.box {
 height: 100vmin;
 width: 100vmin;
}

vmin使用方法

前端程序员需要知道的7种新型的CSS长度单位0

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

.box {
  height: 100vmax;
  width: 100vmax;
}

vmax使用方法

前端程序员需要知道的7种新型的CSS长度单位1

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