CSS媒體查詢是一種非常強(qiáng)大的技術(shù)，它幫助我們?cè)诓煌脚_(tái)上創(chuàng)建自適應(yīng)樣式。在這篇文章中，我們將介紹如何使用媒體查詢?cè)陬^部中實(shí)現(xiàn)自適應(yīng)。

/*默認(rèn)樣式*/
header {
background-color: #333;
color: #fff;
height: 50px;
padding: 10px;
}
/*當(dāng)屏幕寬度小于768像素時(shí)*/
@media only screen and (max-width: 767px) {
header {
height: 100px;
padding: 20px;
}
}
/*當(dāng)屏幕寬度在768像素和992像素之間時(shí)*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
header {
height: 70px;
padding: 15px;
}
}
/*當(dāng)屏幕寬度大于992像素時(shí)*/
@media only screen and (min-width: 992px) {
header {
height: 50px;
padding: 10px;
}
}

在上面的代碼中，我們首先定義了默認(rèn)的頭部樣式。接下來，我們使用媒體查詢來根據(jù)屏幕寬度調(diào)整頭部的高度和內(nèi)邊距。當(dāng)屏幕寬度小于768像素時(shí)，頭部高度增加到100像素并增加20像素的內(nèi)邊距。當(dāng)寬度在768和992像素之間時(shí)，頭部高度減少到70像素，并減少15像素的內(nèi)邊距。最后，當(dāng)屏幕寬度大于992像素時(shí)，頭部恢復(fù)到默認(rèn)的高度和內(nèi)邊距。

通過使用媒體查詢，我們可以讓頭部在不同的設(shè)備上呈現(xiàn)不同的樣式，從而達(dá)到自適應(yīng)的效果。