JavaScript 中的媒體查詢

響應式設計確保內容在所有螢幕尺寸下看起來都不錯。

CSS 使用媒體查詢來應用基於瀏覽器屬性的各種樣式，包括寬度、高度或螢幕解析度。

CSS 媒體查詢應用自定義樣式，從而產生了響應式設計。

在 JavaScript 中使用 window.matchMedia() 方法定義媒體查詢的條件

如果我們想在瀏覽器為 480 畫素寬時將訊息記錄到控制檯，媒體查詢的工作方式與 CSS 類似。

const mediaQuery = window.matchMedia( '( min-width: 480px )' )

matchMedia() 方法返回一個新的 MediaQueryList 物件，然後可以使用該物件來確定文件是否與媒體查詢字串匹配。

它監視文件並檢測它何時匹配或中斷匹配。然後，當滿足此條件時，我們可以觸發日誌記錄到控制檯：

if (mediaQuery.matches) {
  console.log('Screen changed and media query matched!')
}

match 介面的 ReadOnly 屬性的媒體查詢列表是一個布林值，如果文件當前與媒體查詢列表匹配，則返回 true，否則返回 false。

當匹配值發生變化時，可以通過觀察 MediaQueryList 中觸發的變化事件得到通知。

const mediaQuery = window.matchMedia('(min-width: 480px)');
function handleScreenChange(e) {
  if (e.matches) {
    console.log('Screen changed and media query matched!');
  }
}
mediaQuery.addListener(handleScreenChange);
handleScreenChange(mediaQuery);

輸出：

"Screen changed, and media query matched!"

使用此程式碼的唯一缺點是，如果警報被解除，它只會觸發一次。

如果我們更改螢幕寬度並在不重新整理的情況下重試，它不會再次觸發。我們可以使用一個事件監聽器 addListener 來檢查更新以避免這個問題。