CSS中常用的單位如px、em、rem等相信大家都已經(jīng)十分熟悉了。但其實(shí)還有兩個(gè)非常有用的單位——vh和vw。他們分別是相對于視口高度和視口寬度的相對單位。

vh代表視口高度，它將1vh定義為視口高度的1%。例如，如果視口高度為1000px，則1vh將等于10px。以下代碼設(shè)置一個(gè)元素的高度為視口高度的50%，即半屏高：

.element {
height: 50vh;
}

同樣的，vw代表視口寬度，將1vw定義為視口寬度的1%。使用vw可以讓我們輕松地實(shí)現(xiàn)一個(gè)元素的寬度等于視口寬度的一半：

.element {
width: 50vw;
}

除了vh和vw，還有一個(gè)相對單位——vm。它是相對于根元素字號(hào)大小的相對單位。默認(rèn)情況下，根元素字號(hào)大小為16px，因此1vm等于16px的1%。以下代碼設(shè)置一個(gè)元素的高度為根元素字號(hào)大小的50%，即8px：

.element {
height: 50vm;
}

以上就是關(guān)于CSS單位vh和vm的基本介紹。感謝您的閱讀！