CSS是網(wǎng)頁設(shè)計和開發(fā)中不可或缺的一部分，而vh和rem就是其中的兩種單位。下面我們來詳細了解一下這兩種單位如何計算。

/* vh */
/* 將瀏覽器的高度等分為100份，即1vh表示瀏覽器高度的1% */
height: 100vh;

上面的代碼中，我們使用了vh單位將元素的高度設(shè)置為100%。vh表示“視口高度”，即指瀏覽器可視區(qū)域的高度。我們將視口高度等分為100份，每份就是1vh。因此，如果將元素的高度設(shè)置為100vh，它的高度就等于瀏覽器可視區(qū)域的高度。

/* rem */
/* 將根元素的字體大小設(shè)置為16px，1rem表示16px */
font-size: 1rem;

與vh不同，rem單位并不是針對瀏覽器的尺寸而設(shè)定的，而是以根元素的字體大小為基準進行計算。在默認情況下，根元素的字體大小是16px，因此1rem就等于16px。如果需要將元素的寬度設(shè)置為100px，則可以使用6.25rem（100 / 16 = 6.25）。

綜上所述，vh和rem是兩種常見的CSS單位，它們的計算方法也比較簡單。當我們了解它們的特性后，可以更加靈活地運用它們來進行網(wǎng)頁設(shè)計和開發(fā)。