在編寫(xiě)響應(yīng)式網(wǎng)頁(yè)時(shí)，我們經(jīng)常會(huì)遇到需要根據(jù)當(dāng)前屏幕寬度來(lái)調(diào)整網(wǎng)頁(yè)布局的情況。這時(shí)，我們可以利用 CSS 中的媒體查詢來(lái)實(shí)現(xiàn)。

媒體查詢可以根據(jù)不同的條件來(lái)選擇應(yīng)用不同的 CSS 樣式，其中一個(gè)條件就是當(dāng)前屏幕的寬度。

/* 當(dāng)屏幕寬度小于等于 600px 時(shí)應(yīng)用以下樣式 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 當(dāng)屏幕寬度大于 600px 時(shí)應(yīng)用以下樣式 */
@media screen and (min-width: 601px) {
body {
background-color: lightpink;
}
}

通過(guò)上面的代碼，我們可以實(shí)現(xiàn)當(dāng)屏幕寬度小于等于 600px 時(shí)網(wǎng)頁(yè)背景色變?yōu)闇\藍(lán)色，大于 600px 時(shí)變?yōu)闇\粉色。

另外，我們也可以利用媒體查詢來(lái)控制元素的顯示和隱藏，例如：

/* 當(dāng)屏幕寬度小于等于 600px 時(shí)隱藏元素 */
@media screen and (max-width: 600px) {
.hidden {
display: none;
}
}

通過(guò)這種方法，我們可以輕松地實(shí)現(xiàn)網(wǎng)頁(yè)的響應(yīng)式布局，提升用戶體驗(yàn)。