JavaScript 和媒體查詢：建立響應式動態 Web 應用程式

JavaScript 和媒體查詢：綜合指南

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

---

1.什麼是媒體查詢？

媒體查詢可讓開發人員定義根據使用者裝置或視窗的屬性有條件應用的 CSS 規則。

CSS 基本語法：

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

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

---

2.將 JavaScript 與媒體查詢結合

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

文法：

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.監聽媒體查詢變化

您可以使用addEventListener方法監聽媒體查詢狀態的變化。

範例：

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);

這種方法可以動態回應視口更改，無需重新載入頁面。

---

4.常見用例

a) 動態版調整

根據螢幕尺寸變更 JavaScript 驅動程式的佈局。

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) 有條件載入腳本

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

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

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

c) 調整動畫

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

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

---

5.結合 JavaScript 與媒體查詢的好處

1. 動態行為： 對螢幕變更做出反應，無需重新載入頁面。
2. 效能最佳化：有條件地載入資源或腳本。
3. 增強的輔助功能：適應使用者偏好，例如減少運動。
4. 改進的使用者體驗：根據不同的裝置和視窗客製化互動。

---

6.最佳實務

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

---

7.瀏覽器相容性

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

---

8.範例：響應式導覽選單

這是一個結合媒體查詢和 JavaScript 來管理響應式選單的實際範例。

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

---

9.結論

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

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

以上是JavaScript 和媒體查詢：建立響應式動態 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！