CSS媒體查詢是指根據(jù)不同的設(shè)備或屏幕參數(shù)來(lái)設(shè)置樣式的一種技術(shù)。這樣就可以實(shí)現(xiàn)網(wǎng)站在不同設(shè)備上的自適應(yīng)，以適應(yīng)不同的設(shè)備大小或屏幕方向。

使用CSS媒體查詢可以設(shè)置不同的樣式，例如字體大小、背景圖片、寬度和高度等。

/* 根據(jù)設(shè)備分辨率不同設(shè)置不同的背景圖片 */
@media screen and (max-width: 768px) {
body {
background-image: url(mobile_background.jpg);
}
}
@media screen and (min-width: 769px) {
body {
background-image: url(desktop_background.jpg);
}
}
/* 根據(jù)設(shè)備屏幕方向設(shè)置不同的字體大小 */
@media screen and (orientation: portrait) {
body {
font-size: 14px;
}
}
@media screen and (orientation: landscape) {
body {
font-size: 16px;
}
}
/* 根據(jù)設(shè)備類型設(shè)置不同的樣式 */
@media screen and (max-width: 768px) and (max-height: 1024px) and (orientation: portrait) {
/* 在ipad上設(shè)置樣式 */
}
@media screen and (max-width: 320px) and (max-height: 568px) {
/* 在iPhone上設(shè)置樣式 */
}

通過(guò)CSS媒體查詢，可以輕松實(shí)現(xiàn)網(wǎng)站在不同設(shè)備上的自適應(yīng)，提高用戶體驗(yàn)。