JavaScript 和媒體查詢：綜合指南

媒體查詢是一項強大的 CSS 功能，用於根據(jù)使用者裝置的特徵（例如螢?zāi)粚挾?、高度或解析度）?yīng)用樣式。 JavaScript 透過啟用對這些條件變化的動態(tài)回應(yīng)來增強媒體查詢的實用性，從而更好地控制應(yīng)用程式在不同裝置上的行為方式。

---

1.什麼是媒體查詢？

媒體查詢可讓開發(fā)人員定義根據(jù)使用者裝置或視窗的屬性有條件應(yīng)用的 CSS 規(guī)則。

CSS 基本語法：

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

透過 JavaScript，您可以使用 Window.matchMedia() 方法與這些媒體查詢動態(tài)互動。

---

2.將 JavaScript 與媒體查詢結(jié)合

Window.matchMedia() 方法可讓您以程式設(shè)計方式測試媒體查詢並即時回應(yīng)變更。

文法：

const mediaQuery = window.matchMedia("(max-width: 768px)");

檢查查詢是否符合：

if (mediaQuery.matches) {
  console.log("Viewport is 768px or smaller.");
} else {
  console.log("Viewport is larger than 768px.");
}

---

3.監(jiān)聽媒體查詢變化

您可以使用addEventListener方法監(jiān)聽媒體查詢狀態(tài)的變化。

範例：

const mediaQuery = window.matchMedia("(max-width: 768px)");

function handleMediaQueryChange(e) {
  if (e.matches) {
    console.log("Now in mobile view.");
  } else {
    console.log("Now in desktop view.");
  }
}

// Attach listener
mediaQuery.addEventListener("change", handleMediaQueryChange);

這種方法可以動態(tài)回應(yīng)視口更改，無需重新載入頁面。

---

4.常見用例

a) 動態(tài)版調(diào)整

根據(jù)螢?zāi)怀叽缱兏?JavaScript 驅(qū)動程式的佈局。

const mediaQuery = window.matchMedia("(max-width: 768px)");

function adjustLayout() {
  if (mediaQuery.matches) {
    document.body.style.backgroundColor = "lightblue";
  } else {
    document.body.style.backgroundColor = "white";
  }
}

// Initial check and listener
adjustLayout();
mediaQuery.addEventListener("change", adjustLayout);

b) 有條件載入腳本

僅在滿足特定條件時載入或執(zhí)行腳本。

const mediaQuery = window.matchMedia("(max-width: 768px)");

if (mediaQuery.matches) {
  // Load mobile-specific script
  import("./mobile.js").then(module => {
    module.init();
  });
}

c) 調(diào)整動畫

在較小的裝置上停用動畫以提高效能。

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

---

5.結(jié)合 JavaScript 與媒體查詢的好處

1. 動態(tài)行為： 對螢?zāi)蛔兏龀龇磻?yīng)，無需重新載入頁面。
2. 效能最佳化：有條件地載入資源或腳本。
3. 增強的輔助功能：適應(yīng)使用者偏好，例如減少運動。
4. 改進的使用者體驗：根據(jù)不同的裝置和視窗客製化互動。

---

6.最佳實務(wù)

• 結(jié)合 CSS 和 JavaScript： 使用 CSS 進行樣式設(shè)置，並使用 JavaScript 進行邏輯處理。
• 反跳調(diào)整大小事件：回應(yīng)視窗大小調(diào)整時，對事件進行反跳以避免效能問題。
• 後備： 始終包含不支援的瀏覽器的預(yù)設(shè)行為。
• 使用現(xiàn)代語法： 偏好 addEventListener 而不是已棄用的 addListener。

---

7.瀏覽器相容性

大多數(shù)現(xiàn)代瀏覽器完全支援 Window.matchMedia() API。但是，較舊的瀏覽器可能需要填入 MediaQueryList 上的 addEventListener 方法。

---

8.範例：響應(yīng)式導(dǎo)覽選單

這是一個結(jié)合媒體查詢和 JavaScript 來管理響應(yīng)式選單的實際範例。

const mediaQuery = window.matchMedia("(max-width: 768px)");

---

9.結(jié)論

透過結(jié)合 JavaScript 和媒體查詢，您可以實現(xiàn)高度動態(tài)和響應(yīng)式的設(shè)計。這種方法可以即時適應(yīng)使用者偏好和設(shè)備特性，從而增強效能和使用者體驗。掌握這些技術(shù)對於建立現(xiàn)代的、裝置友善的 Web 應(yīng)用程式至關(guān)重要。

嗨，我是 Abhay Singh Kathayat！
**我是全端開發(fā)人員，擁有前端和後端技術(shù)的專業(yè)知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應(yīng)用程式。
請隨時透過我的商務(wù)電子郵件與我聯(lián)繫：**kaashshorts28@gmail.com.

以上是JavaScript 和媒體查詢：建立響應(yīng)式動態(tài) Web 應(yīng)用程式的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！