CSS 媒體查詢是一項(xiàng)非常重要的技術(shù)，可以使網(wǎng)頁根據(jù)不同屏幕大小和設(shè)備類型，自動(dòng)調(diào)整布局和樣式。以下是一些常用的 CSS 媒體查詢寫法：

/* 當(dāng)屏幕寬度小于等于 768 像素時(shí)，應(yīng)用以下樣式 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}
/* 當(dāng)屏幕寬度大于 768 像素時(shí)，應(yīng)用以下樣式 */
@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
/* 當(dāng)屏幕寬度在 400 到 600 像素之間時(shí)，應(yīng)用以下樣式 */
@media screen and (min-width: 400px) and (max-width: 600px) {
.container {
width: 100%;
}
}
/* 當(dāng)設(shè)備為手機(jī)時(shí)應(yīng)用以下樣式 */
@media only screen and (max-device-width: 480px) {
.menu {
display: none;
}
}
/* 當(dāng)設(shè)備為 iPad 時(shí)應(yīng)用以下樣式 */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.banner {
height: 500px;
}
}

以上代碼演示了如何根據(jù)屏幕寬度、設(shè)備類型和設(shè)備方向等條件，使用 CSS 媒體查詢進(jìn)行樣式調(diào)整。使用媒體查詢可以讓我們更好地控制網(wǎng)頁在不同設(shè)備上的呈現(xiàn)效果，適配更多不同的屏幕和設(shè)備。