當我們需要在CSS中設置網頁元素的尺寸時，通常需要獲取網頁可視區域的寬度和高度。這可以通過JavaScript來實現，但是CSS也提供了一種方便的解決方法，那就是使用vw和vh單位。

vw和vh單位分別表示視口寬度和視口高度的百分比。例如，100vw表示視口的寬度，而50vh表示視口的一半高度。

/* 設置元素寬度為視口寬度的50% */
div {
width: 50vw;
}

當窗口大小改變時，vw和vh單位也會相應地改變。這意味著元素的大小會自動適應屏幕大小。

請注意，vw和vh單位不包括瀏覽器工具欄、滾動條等其他視口元素的大小。如果需要包括這些元素，可以使用vh單位加上1vh的值。

/* 設置元素高度為視口高度加上1vh的值 */
div {
height: calc(100vh + 1vh);
}

使用vw和vh單位可以輕松地實現跨設備的響應式設計。這些單位也可以與其他單位組合使用，例如px和rem。

/* 設置元素字體大小為視口寬度的5% */
div {
font-size: 5vw;
}

總的來說，vw和vh單位是CSS中一個非常有用的特性，可以幫助我們更方便地實現響應式設計。當你需要設置元素的尺寸時，可以考慮使用這些單位來實現自動適應屏幕大小的效果。