前言?

說起媒體查詢想必大家最先想到的都是CSS中@media，沒錯，這是我們最常用的媒體查詢方法，主要用來為我們的網(wǎng)站做適配處理。

比如：

h1 {
  font-size: 2rem;
  color: green;
}
@media (min-width: 600px) {
  h1 {
    font-size: 4rem;
  }
}

我們使用 CSS 告訴瀏覽器標(biāo)題需要為綠色，字體大小為 2rem。但是當(dāng)屏幕寬度超過 600px 時，字體大小需要增加到 4rem。

上面這種方式相信大家都并不陌生，現(xiàn)在我們再來嘗試另外一種媒體查詢的方法。

在JavaScript中使用媒體查詢?

我們可以在 JavaScript 代碼中使用與上面相同的媒體查詢。主要API就是 ----matchMedia()

Window.matchMedia()

Window? 的 「?matchMedia()」 方法返回一個新的 MediaQueryList?對象，表示指定的媒體查詢 (en-US)字符串解析后的結(jié)果。返回的 MediaQueryList? 可被用于判定 Document? 是否匹配媒體查詢，或者監(jiān)控一個 document 來判定它匹配了或者停止匹配了此媒體查詢。(MDN)?

語法

mqList = window.matchMedia(mediaQueryString)

參數(shù)

該matchMedia()方法接受單個參數(shù)作為其值，即您要檢查的媒體查詢。

• mediaQueryString：一個被用于媒體查詢解析的字符串。

返回值

一個用來媒體查詢的新的MediaQueryList對象。

它包含兩個屬性：

• media，它將媒體查詢存儲為序列化字符串
• matches，它基本上是一個布爾值，如果我們作為參數(shù)提供的媒體查詢與文檔匹配則返回true?

調(diào)用matchMedia本身不會做太多的事情，并且我們只能在頁面加載時檢查是否滿足查詢條件，但如果我們想要在用戶改變屏幕大小時也能檢測到這種變化，在過去有兩種方法，稱為addListener()和removeListener()，可以使用它們來監(jiān)聽媒體查詢狀態(tài)的任何變化。但是，它們現(xiàn)在已被棄用。

現(xiàn)在我們應(yīng)該考慮使用MediaQueryList addEventListener。

addEventListener

matchMedia - change

<div id="show"></div>
<script>
  let mqList = window.matchMedia('(min-width: 600px)');
function widthChangeCallback(mqList) {
  console.log(mqList, '-')
  if(mqList.matches) {
    show.innerHTML = `<p class="large">我比599px大</p>`;
  } else {
    show.innerHTML = `<p class="small">我比599px小</p>`;
  }
}
widthChangeCallback(mqList)
mqList.addEventListener('change', widthChangeCallback);
</script>

當(dāng)我們調(diào)整窗口大小時，這段代碼會檢測屏幕寬度并更新文案

window - resize

看到這里可能大家都想到了resize事件，沒錯該matchMedia()方法的另一種替代方法涉及將resize事件偵聽器附加到window，同樣能夠?qū)崿F(xiàn)上面的效果。

function widthChangeCallback() {
  if(window.innerWidth > 599) {
    show.innerHTML = `<p class="large">我比599px大</p>`;
  } else {
    show.innerHTML = `<p class="small">我比599px小</p>`;
  }
}
window.addEventListener('resize', widthChangeCallback);
widthChangeCallback();

性能對比

既然兩種方案都能實現(xiàn)，所以我們很自然地想知道它們中的哪一個能提供更好的性能，以及我們應(yīng)該在什么時候使用這些解決方案中的一個。

widthChangeCallback()每次調(diào)整窗口大小時，調(diào)整大小事件偵聽器都會觸發(fā)該函數(shù)。這僅在某些情況下需要響應(yīng)窗口大小更改的每個實例，例如更新畫布。

但是，在某些情況下，只有當(dāng)寬度或高度達到某個閾值時才需要發(fā)生某些事情。一個例子就是我們上面所做的文本更新。在這種情況下，matchMedia()將會獲得更好的性能，因為它僅在媒體查詢條件的實際更改時觸發(fā)回調(diào)。

從上面我們可以看出兩者的回調(diào)執(zhí)行次數(shù)差異巨大，所以我們在開發(fā)過程中應(yīng)當(dāng)根據(jù)業(yè)務(wù)的實際需求去選擇使用哪一個API。

總結(jié)?

我們了解到，借助該matchMedia()方法，我們在 CSS 中經(jīng)常使用的媒體查詢現(xiàn)在也可以在 JavaScript 中使用。并且使用matchMedia()可以為我們提供更好的性能，而不是在window 上添加事件偵聽器resize。與依賴于window做一些事情的舊方法相比，我們可以使用媒體查詢執(zhí)行更多檢查。