在網頁設計中，我們經常需要考慮用戶使用不同設備和不同分辨率的情況。此時，我們就需要使用CSS隨窗口大小變化來適應用戶的需求。

@media screen and (max-width: 768px) {
/* 在窗口寬度小于768px時，
更改樣式 */
}

CSS提供了一個媒體查詢（Media Query）功能，可以在不同的窗口大小下應用不同的樣式。

如上述代碼所示，我們可以使用@media關鍵字來定義媒體查詢。在括號中指定條件，例如最大寬度為768像素。然后在花括號中書寫相應的CSS樣式。

.box {
width: 50%;
height: 200px;
border: 1px solid #ccc;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.box {
width: 100%;
}
}

在實際應用中，我們可以通過使用媒體查詢的方式來實現元素的自適應。例如上述代碼中，當窗口寬度小于768px時，.box元素的寬度將變為100%。這樣就可以在不同設備的屏幕上進行適應性布局。

此外，我們還可以使用百分比布局、rem單位、flex等方式進行適應性布局。需要根據實際情況進行選擇。

.box {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 768px) {
.box {
flex-direction: column;
justify-content: center;
align-items: center;
}
}

例如上述代碼中，我們使用了flex布局來實現元素的居中對齊。當窗口寬度小于768px時，將使用flex-direction: column屬性來改變元素的排列方式，同時使用justify-content: center和align-items: center屬性來讓元素在垂直方向上居中對齊。

總之，通過使用CSS隨窗口大小變化，我們可以輕松地實現網頁的自適應布局和響應式設計，提高用戶的瀏覽體驗。