MediaQueryList — 获取屏幕宽高、变化时通知页面

2023-12-30 21:57:10

MediaQueryList 对象

MediaQueryList 对象是 JavaScript 中用于检测媒体查询状态的工具。它允许您检查页面当前是否匹配给定的媒体查询，以及在媒体查询状态发生更改时侦听事件。

使用 window.matchMedia() 创建 MediaQueryList 对象

要创建 MediaQueryList 对象，您可以使用 window.matchMedia() 方法。该方法接受一个媒体查询字符串作为参数，并返回一个 MediaQueryList 对象。

例如，以下代码创建一个 MediaQueryList 对象，用于查询屏幕宽度是否大于或等于 768px：

const mediaQueryList = window.matchMedia('(min-width: 768px)');

MediaQueryList 对象的属性和方法

MediaQueryList 对象具有以下属性和方法：

matches ：一个布尔值，指示媒体查询当前是否匹配。
media ：媒体查询字符串。
addListener() ：添加一个事件侦听器，用于在媒体查询状态发生更改时触发。
removeListener() ：删除一个事件侦听器。

使用 MediaQueryList 对象

您可以使用 MediaQueryList 对象来实现各种功能，例如：

自适应布局 ：您可以使用 MediaQueryList 对象来创建自适应布局，即根据设备的屏幕尺寸来调整页面的布局。例如，您可以使用以下代码来创建一个自适应布局，在屏幕宽度小于 768px 时显示一个移动端菜单，在屏幕宽度大于或等于 768px 时显示一个桌面端菜单：

const mediaQueryList = window.matchMedia('(max-width: 768px)');

mediaQueryList.addListener((e) => {
  if (e.matches) {
    // 显示移动端菜单
  } else {
    // 显示桌面端菜单
  }
});

响应式图像 ：您可以使用 MediaQueryList 对象来创建响应式图像，即根据设备的屏幕尺寸来调整图像的大小。例如，您可以使用以下代码来创建一个响应式图像，在屏幕宽度小于 768px 时显示一张小尺寸的图像，在屏幕宽度大于或等于 768px 时显示一张大尺寸的图像：

const mediaQueryList = window.matchMedia('(max-width: 768px)');

mediaQueryList.addListener((e) => {
  if (e.matches) {
    // 显示小尺寸图像
  } else {
    // 显示大尺寸图像
  }
});