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) 调整动画

在较小的设备上禁用动画以提高性能。

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

if (mediaQuery.matches) {
  console.log("Reduce motion preferences detected.");
  document.body.classList.add("no-animations");
}

5. 结合 JavaScript 和媒体查询的好处

动态行为：无需重新加载页面即可对屏幕变化做出反应。

性能优化：有条件地加载资源或脚本。

增强的可访问性：适应用户偏好，例如减少运动。

改进的用户体验：根据不同的设备和视口定制交互。

6. 最佳实践

结合 CSS 和 JavaScript：使用 CSS 进行样式设置，使用 JavaScript 进行逻辑设置。

防抖动调整大小事件：响应窗口大小调整时，防抖动事件以避免性能问题。

后备方案：始终包含不受支持的浏览器的默认行为。

使用现代语法：优先使用 addEventListener，而不是已弃用的 addListener。

7.浏览器兼容性

大多数现代浏览器都完全支持 `Window.matchMedia()` API。不过，较旧的浏览器可能需要 `MediaQueryList` 上的 `addEventListener` 方法的 polyfill。

8.示例：响应式导航菜单

这是一个结合媒体查询和 JavaScript 来管理响应式菜单的实际示例。

const mediaQuery = window.matchMedia("(max-width: 768px)");
const navMenu = document.querySelector(".nav-menu");

function handleMenuBehavior() {
  if (mediaQuery.matches) {
    navMenu.classList.add("mobile-menu");
    console.log("Mobile menu applied.");
  } else {
    navMenu.classList.remove("mobile-menu");
    console.log("Desktop menu applied.");
  }
}

// Initial setup and listener
handleMenuBehavior();
mediaQuery.addEventListener("change", handleMenuBehavior);

9. 结论

通过结合 JavaScript 和媒体查询，您可以实现高度动态和响应式的设计。这种方法可以实时适应用户偏好和设备特性，从而提高性能和用户体验。掌握这些技术对于构建现代、设备友好的 Web 应用程序至关重要。

CLIS.CC