vmin、vmax怎么使用

作者:烽行天下

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

結合使用這些單位可以為我們提供一個新穎有意思的方式來靈活地利用我們視口的大小。

四川时时彩在线投注