CSS中如何獲得當(dāng)前窗口的大小？這是一個(gè)很重要的問題，因?yàn)槲覀兘?jīng)常需要使用響應(yīng)式設(shè)計(jì)來使頁面在不同尺寸的設(shè)備上看起來好看，而了解窗口的大小是非常關(guān)鍵的。

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

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

上面的示例中，我們使用了@media查詢來針對(duì)不同的設(shè)備大小選擇不同的背景顏色。當(dāng)窗口大小大于等于768個(gè)像素時(shí)，背景顏色變?yōu)榫G色，否則為橙色。

但是，如何確切地知道窗口的大小，以便我們可以使用@media來制定適當(dāng)?shù)囊?guī)則呢？

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

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

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

通過使用vw和vh單位，我們可以輕松地獲得視口的大小并進(jìn)行響應(yīng)式設(shè)計(jì)。可以看到，CSS提供了很多強(qiáng)大的工具，讓我們可以輕松地使網(wǎng)站適應(yīng)各種設(shè)備。