vh和vw是CSS3新增加的兩個長度單位,它們分別代表視口高度和視口寬度的百分比。
vh是相對于視口的高度來定義長度的單位,也就是在某個視口高度為100%時,1vh等于1%的視口高度。在許多情況下,開發者會使用vh作為長度單位,以確保元素在不同設備和不同視口大小下都有適合的顯示效果。例如:
div{ height: 50vh; }
這樣就將元素的高度設為視口高度的一半。
類似的,vw也是用于定義元素長度的單位,區別在于它是相對于視口的寬度來定義長度的。同樣地,在某個視口寬度為100%時,1vw等于1%的視口寬度。例如:
div{ width: 25vw; }
這樣就將元素的寬度設為視口寬度的四分之一。
使用vh和vw可以使得開發者在制作響應式設計時更方便地適應不同設備和不同視口大小,從最小的智能手機到最大的桌面電腦,都可以讓元素以相對于視口的單位進行調整。