CSS中如何獲得當前窗口的大小？這是一個很重要的問題，因為我們經常需要使用響應式設計來使頁面在不同尺寸的設備上看起來好看，而了解窗口的大小是非常關鍵的。

首先，我們來看一個獲取窗口大小的示例：

body {
background-color: orange;
}
@media (min-width: 768px) {
body {
background-color: green;
}
}

上面的示例中，我們使用了@media查詢來針對不同的設備大小選擇不同的背景顏色。當窗口大小大于等于768個像素時，背景顏色變為綠色，否則為橙色。

但是，如何確切地知道窗口的大小，以便我們可以使用@media來制定適當的規則呢？

答案是使用CSS的視口單位——vw和vh。這些單位可以讓我們將元素的大小相對于視口的大小進行設置。

在CSS中使用vw和vh，1vw相當于視口的寬度的1%，1vh相當于視口的高度的1%。因此，我們可以將一個元素的寬度設置為50vw，并將它的高度設置為50vh，然后它就會自適應地填滿視口的一半。

.my-element {
width: 50vw;
height: 50vh;
}

通過使用vw和vh單位，我們可以輕松地獲得視口的大小并進行響應式設計。可以看到，CSS提供了很多強大的工具，讓我們可以輕松地使網站適應各種設備。