響應式字體:自適應視圖窗口大小的字體單位


最近在學習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, 取決於哪個更大一點

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM