視口單位是CSS3為了適應各種設備屏幕尺寸而增加的單位，其中最常用的就是vh。vh 是基于視口的高度而計算的，其中 1vh 等于視口的高度的1%。

使用 vh 單位可以讓元素的大小與屏幕的大小保持一致，并且可以適應不同尺寸的設備屏幕。100vh就意味著元素的高度將填滿整個屏幕。

.hero-image {
height: 100vh;
background-image: url("hero-image.jpg");
background-size: cover;
background-position: center;
}

在上面的代碼中，.hero-image 類被設置了一個 100vh 的高度，這意味著它將占據整個屏幕的高度。同時，它使用 background-image 屬性設置了一張背景圖片并使用了 cover 樣式值保持圖片的比例，使其填充整個元素。最后， background-position 屬性將圖片放在元素中央。

100vh 還可以用于制作響應式布局，例如在移動設備上垂直滾動一個全屏幕的幻燈片。通過媒體查詢和 JavaScript，可以根據設備的屏幕高度動態地調整元素的大小。

@media screen and (max-height: 600px) {
.hero-image {
height: 50vh;
}
}

這里我們使用了媒體查詢，當屏幕高度小于 600px 時，將元素的高度設置為 50vh，從而適應較小的設備屏幕。

總之， vh 單位非常適合用于創建全屏幕的響應式布局和其他需要基于屏幕尺寸計算大小的設計效果。