當我們在開發網頁時，經常需要根據不同的屏幕寬度，調整元素的寬度，使網頁能夠在不同的設備上呈現出最佳的效果。但是，我們如何實現在瀏覽器窗口寬度發生變化時，能夠自動監聽并調整元素的寬度呢？這時候，就需要使用監聽CSS變寬的方法了。

@media screen and (min-width: 600px) {
.container {
width: 500px;
}
}
@media screen and (min-width: 768px) {
.container {
width: 700px;
}
}
@media screen and (min-width: 992px) {
.container {
width: 900px;
}
}

上面的代碼片段就是使用CSS媒體查詢，監聽了瀏覽器窗口寬度的變化，從而在不同的屏幕尺寸下，自動調整了 .container 元素的寬度。

值得注意的是，我們通常還需要設置一個初始的寬度，例如：

.container {
width: 500px;
}

這樣，在瀏覽器窗口的寬度達到哪個媒體查詢條件之前， .container 元素的寬度一直保持 500px。當瀏覽器寬度超過 600px 時，就會觸發第一個媒體查詢，從而將 .container 的寬度變為 500px。隨著瀏覽器寬度的變化，將不斷根據不同的媒體查詢條件，修改 .container 元素的寬度，從而達到自適應的效果。