隨著移動設備的普及，網(wǎng)頁適應不同的屏幕尺寸變得越來越重要。而CSS媒體查詢（Media Query）則成為了實現(xiàn)響應式設計的核心技術之一。

@media screen and (min-width: 768px) {
/* 在屏幕寬度大于等于768像素時應用下面的CSS樣式 */
body {font-size: 16px;}
}
@media screen and (max-width: 767px) {
/* 在屏幕寬度小于等于767像素時應用下面的CSS樣式 */
body {font-size: 14px;}
}

然而，在實際開發(fā)中，我們往往會遇到各種設備和瀏覽器的兼容性問題。

比如，有些老舊的Android設備可能不支持某些媒體查詢條件，而某些瀏覽器則可能不支持媒體查詢本身。為了解決這些問題，我們需要一些兼容性的處理。

/* 在下面代碼之前，我們可以加上一些JavaScript代碼 */
if (window.matchMedia) {
/* 完全支持 MediaQuery 的瀏覽器 */
var mq1 = window.matchMedia('(min-width: 768px)');
var mq2 = window.matchMedia('(max-width: 767px)');
if (mq1.matches) {
/* 屏幕寬度大于等于768像素時應用下面的CSS樣式 */
document.body.style.fontSize = '16px';
}
if (mq2.matches) {
/* 屏幕寬度小于等于767像素時應用下面的CSS樣式 */
document.body.style.fontSize = '14px';
}
} else {
/* 不支持 MediaQuery 的瀏覽器 */
document.body.style.fontSize = '16px';
}

通過JavaScript的判斷和兼容性處理，我們可以確保在不同設備和瀏覽器上都能夠正確地使用媒體查詢。