最近在學習Element UI做些響應式頁面的練習,其中遇到一個問題就是字體的大小。
之前我都是用rem作為相對尺寸單位來設置字體大小的,但在移動端下顯示的效果並不好。
因為rem說到底也是一個“固定”單位,它是依據根元素的字體大小來決定尺寸的。
想要個真正意義上的相對尺寸來設置字體,最后就查到了vw、vh、vmin、vmax
一個單位相於當前視圖窗口大小的1%,寬度和高度是不同的,分別用(vw, vh)表示。你可以通過vmin和vmax設置最大最小值。
1vw = 當前視圖窗口(viewport)1%的寬度
1vh = 當前視圖窗口(viewport)1%的高度
1vmin = 1vw 或 1vh, 取決於哪個更小一點
1vmax = 1vw 或 1vh, 取決於哪個更大一點