JQuery 是非常流行的 JavaScript 庫，可使 Web 開發人員輕松地創建動態網站。而媒體查詢的兼容性問題是一個網站開發需要面對的問題，特別是需要為桌面和移動設備創建不同樣式的網站時。jQuery 提供了一個稱為 jquery.media.js 的插件，它可以解決媒體查詢的兼容性問題。

首先，我們需要通過

<script>

標簽導入 jQuery 和 jquery.media.js 插件。

<script src="jquery.min.js"></script>
<script src="jquery.media.js"></script>

接下來，我們需要定義一個媒體查詢，使用 jQuery 的

$.media()

方法，如下所示：

var mediaQuery = $.media("screen and (max-width: 767px)");

現在，我們可以使用 jQuery 中的

.on()

和

.off()

方法，設置當媒體查詢結果匹配或不匹配時執行的事件，如下所示：

mediaQuery.on("match", function(){
// 這里寫匹配時執行的代碼
});
mediaQuery.on("unmatch", function(){
// 這里寫不匹配時執行的代碼
});

最后，不要忘記在所需頁面加載后，使用

.check()

方法，檢查媒體查詢是否匹配，如下所示：

mediaQuery.check();

總的來說，使用 jquery.media.js 插件可以輕松解決媒體查詢的兼容性問題，使得網站在桌面和移動設備上都可以正確顯示所需的樣式。