在 CSS 中,我們除了可以設置一個元素的高度固定值,還可以使用屏幕的高度比例屬性進行設置。
這個屬性就是
vh,表示視口高度的百分比。
比如,如果我們想讓一個元素在屏幕的 50% 高度的位置顯示,我們可以這樣寫:
height: 50vh;
這樣,無論用戶的屏幕尺寸如何,該元素的高度都將是視口高度的 50%。
除了
vh,還有一個屬性是
vw,表示視口寬度的百分比。使用方法和
vh類似。
需要注意的是,在移動端上使用
vh和
vw屬性比在桌面端上更為常見,因為移動設備尺寸千差萬別,使用這兩個屬性可以更好地適配不同分辨率的屏幕。
總之,
vh和
vw屬性可以幫助我們更靈活地控制元素的高度和寬度,適應不同屏幕尺寸,讓網頁呈現的效果更加美觀、統一。