首先，大家来看一个获取窗口大小的示例：
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提供了很多强大的工具，让大家可以轻松地使网站适应各种设备。