在JavaScript中使用媒体查询的教程

大多数现代网站使用响应性网页设计技术，以确保其外观良好、可读性好，并在任何屏幕大小的设备上保持可用性，如手机、平板电脑、笔记本电脑、台式电脑显示器、电视、投影仪等。

使用这些技术的站点有一个模板，该模板根据屏幕尺寸修改布局：

较小的屏幕通常显示线性、单列视图，其中通过单击（汉堡）图标激活菜单等UI控件。

更大的屏幕显示更多信息，可能带有水平对齐的侧栏。UI控件（如菜单项）可能始终可见，以便于访问。

响应式web设计的一个重要部分是实现CSS或JavaScript媒体查询，以检测设备大小并自动提供适合该大小的设计。我们将讨论为什么这些查询很重要以及如何使用它们，但首先，让我们讨论一般的响应式设计。

1. 为什么响应式设计很重要？
2. 响应式设计如何工作？
3. 媒体查询最佳实践
4. 媒体查询备选方案
5. 您是否需要JavaScript中的媒体查询？
6. 选项 1：监视视场维度
7. 选项 2：定义和监视CSS自定义属性（可变）
8. 选项 3： 使用匹配媒体API

为什么响应式设计很重要？

不可能只提供一个页面布局，而期望它在任何地方都能工作。

当手机在21世纪初首次获得基本的web访问时，网站所有者通常会创建两到三个单独的页面模板，松散地基于手机和桌面视图。随着设备种类呈指数级增长，这种做法变得越来越不切实际。

今天，有许多屏幕尺寸，从微型手表显示器到巨大的8K显示器甚至更大。即使你只考虑手机，最近的设备可以比许多低端笔记本电脑具有更高的分辨率。

移动设备的使用量也超过了台式电脑。除非你的网站有一组特定的用户，否则你可以期望大多数人通过智能手机访问它。尽管大多数网页设计师、开发人员和客户继续使用标准PC机，但小屏幕设备已不再是后知后觉，应该从一开始就加以考虑。

谷歌已经认识到移动设备的重要性。当网站在智能手机上可用且表现良好时，在谷歌搜索中排名会更好。好的内容仍然至关重要，但加载速度慢、无法适应用户群屏幕尺寸的网站可能会损害您的业务。

最后，考虑可访问性。一个适合所有人的网站，无论他们使用什么设备，都会吸引更多的观众。可访问性是许多国家的法律要求，但即使不是你所在的地方，也要考虑到更多的观众会带来更多的转换和更高的盈利能力。

响应式设计如何工作？

响应式设计的基础是媒体查询：一种CSS技术，可以根据输出类型（屏幕、打印机甚至语音）、屏幕尺寸、显示纵横比、设备方向、颜色深度和指针精度等指标应用样式。媒体查询还可以考虑用户偏好，包括减少动画、明暗模式和更高对比度。

我们展示的示例演示了仅使用屏幕宽度的媒体查询，但是站点可以更加灵活。有关详细信息，请参阅MDN上的全套选项。

媒体查询支持非常出色，已经在浏览器中使用了十多年。只有IE8及以下版本没有支持。它们忽略了媒体查询应用的样式，但这有时会带来好处（请参阅下面的最佳实践部分）。

使用媒体查询应用样式有三种标准方法。第一个加载HTML代码中的特定样式表。例如，当设备的屏幕宽度至少为800像素时，以下标记将加载wide.css样式表：

其次，样式表可以使用@import规则有条件地加载到CSS文件中：

/* main.css */
@import url('wide.css') screen and (min-width: 800px);

请注意，应避免使用@import，因为每个导入的CSS文件都是渲染块。HTML的标记是并行下载的，而@import则是串行下载文件。

更典型的是，您将使用@media CSS规则块在样式表中应用媒体查询，该规则块修改特定的样式。例如：

/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
}

开发人员可以应用任何必要的媒体查询规则来调整站点的布局。

媒体查询最佳实践

最初设计媒体查询时，许多网站选择了一套固定的布局。这在概念上更易于设计和编码，因为它有效地复制了一组有限的页面模板。例如：

1. 小于600px的屏幕宽度使用400px宽的移动式布局。
2. 600px和999px之间的屏幕宽度使用600px宽的平板电脑布局。
3. 大于1000px的屏幕宽度使用1000px宽的桌面式布局。

这项技术有缺陷。在非常小和非常大的屏幕上的结果可能看起来很差，并且随着设备和屏幕尺寸的变化，可能需要CSS维护。

一个更好的选择是使用带有断点的“移动第一流体”设计，该断点可以在特定大小下调整布局。本质上，默认布局使用最简单的小屏幕样式，将元素定位在线性垂直块中。

例如，和在

/* default small-screen device */
main {
  width: 100%;
}

article, aside {
  width: 100%;
  padding: 2em;
}

以下是所有浏览器的结果-即使是不支持媒体查询的非常旧的浏览器：

不支持媒体查询的示例屏幕截图。

当支持媒体查询且屏幕超过特定宽度（例如500px）时，和元素可以水平放置。本例使用CSS网格，其中主要内容使用大约三分之二的宽度，次要内容使用剩余的三分之一：

/* larger device */
@media (min-width: 500px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2em;
  }

  article, aside {
    width: auto;
    padding: 0;
  }
}

以下是大屏幕上的结果：

支持媒体查询的示例屏幕截图

媒体查询替代方案

响应性设计也可以在现代CSS中使用更新的属性实现，这些属性本质上适应布局，而无需检查视口尺寸。选择包括：

• calc, min-width, max-width, min-height, max-height和较新的clamp属性都可以定义尺寸标注，根据已知限制和可用空间调整图元的大小。
• 视口单位vw, vh, vmin 和 vmax 可以根据屏幕尺寸分数调整元素的大小。
• 文本可以显示在CSS列中，在空间允许的情况下显示或消失。
• 可以使用min-content, fit-content 和 max-content 维度，根据元素的子元素大小调整元素的大小。
• CSS flexbox可以在元素开始超出可用空间时进行换行或不换行。
• CSS网格元素可以使用比例分数 fr 单位调整大小。repeat CSS函数可以与minmax, auto-fit 和 auto-fill结合使用，以分配可用空间。
• 新的和（当前）实验性的CSS容器查询可以对布局中组件可用的部分空间作出反应。

这些选项超出了本文的范围，但它们通常比只能响应屏幕尺寸的粗糙媒体查询更实用。如果您可以在没有媒体查询的情况下实现布局，那么随着时间的推移，它可能会使用更少的代码，更高效，并且需要更少的维护。

也就是说，在某些情况下，媒体查询仍然是唯一可行的布局选项。当你需要考虑其他屏幕因素时，它们仍然是必不可少的，比如纵横比、设备方向、颜色深度、指针精度，或者用户偏好，比如动画和光/暗模式。

您是否需要JavaScript中的媒体查询？

到目前为止，我们主要讨论CSS。这是因为大多数布局问题都可以而且应该单独用CSS来解决。

但是，在某些情况下，使用JavaScript媒体查询而不是CSS是可行的，例如：

• 诸如菜单之类的组件在小屏幕和大屏幕上具有不同的功能。
• 切换纵向/横向会影响web应用程序的功能。
• 基于触摸的游戏必须更改布局或调整控制按钮。
• web应用程序遵循用户偏好，如暗/光模式、减少动画、触摸粗糙度等。

以下部分演示了在JavaScript中使用媒体查询或类似于媒体查询的选项的三种方法。所有示例都返回一个状态字符串，其中：

• 小视图=宽度小于400像素的屏幕；
• 中视图=宽度在400到799像素之间的屏幕；
• 大视图=宽度为800像素或更多的屏幕。

选项 1：监视视场维度

在媒体查询实施之前的黑暗日子里，这是唯一的选择。JavaScript将侦听浏览器“调整大小”事件，使用window.innerWidth和window.innerHeight（或旧IE中的document.body.clientWidth和document.body.clientHeight）分析视口尺寸，并做出相应的反应。

此代码将计算出的小、中或大字符串输出到控制台：

const
  screen = {
    small: 0,
    medium: 400,
    large: 800
  };

// observe window resize
window.addEventListener('resize', resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

  // get window width
  const iw = window.innerWidth;
 
  // determine named size
  let size = null;
  for (let s in screen) {
    if (iw >= screen[s]) size = s;
  }

  console.log(size);
}

您可以在此处查看工作演示。（如果使用桌面浏览器，请在新窗口中打开此链接，以便于调整大小。移动用户可以旋转设备。）

上面的示例在调整浏览器大小时检查视口大小；确定它是小型、中型还是大型；并将其设置为body元素上的类，从而更改背景颜色。

这种方法的优点包括：

• 它可以在每一个可以运行JavaScript的浏览器中运行——甚至是古老的应用程序。
• 您正在捕获准确的尺寸，并可以做出相应的反应。

缺点是：

• 这是一种需要大量代码的老技术。
• 是不是太精确了？你真的需要知道宽度是966px还是967px吗？
• 您可能需要手动将维度匹配到相应的CSS媒体查询。
• 用户可以快速调整浏览器大小，使处理程序功能每次都再次运行。这会通过限制事件来重载较旧和较慢的浏览器。它只能每500毫秒触发一次。

总之，除非有非常具体和复杂的大小调整要求，否则不要监视视口尺寸。

选项 2：定义和监视CSS自定义属性（可变）

这是一种稍微不寻常的技术，它在触发媒体查询时更改CSS中自定义属性字符串的值。所有现代浏览器（但不是IE）都支持自定义属性。

在下面的示例中，@media代码块内的--screen custom property设置为“small”、“medium”或“large”：

body {
  --screen: "small";
  background-color: #cff;
  text-align: center;
}

@media (min-width: 400px) {
 
  body {
    --screen: "medium";
    background-color: #fcf;
  }
 
}

@media (min-width: 800px) {
 
  body {
    --screen: "large";
    background-color: #ffc;
  }
 
}

可以使用伪元素单独在CSS中输出该值（但请注意，它必须包含在单引号或双引号中）：

p::before {
  content: var(--screen);
}

您可以使用JavaScript获取自定义属性值：

const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen');

但这并不是全部，因为返回值包含CSS中冒号后定义的所有空格和引号字符。字符串将为”large”，因此需要稍微整理一下：

// returns small, medium, or large in a string
const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen')
                 .replace(/W/g, '');

您可以在此处查看工作演示。（如果使用桌面浏览器，请在新窗口中打开此链接，以便于调整大小。移动用户可以旋转设备。）

该示例每两秒钟检查一次CSS值。它需要一点JavaScript代码，但需要轮询更改—您无法使用CSS自动检测到自定义属性值已更改。

也不可能将值写入伪元素，并使用DOM变异观察器检测更改。伪元素不是DOM的“真实”部分！

优点：

• 这是一种简单的技术，主要使用CSS并匹配真实的媒体查询。可以同时修改任何其他CSS属性。
• 无需复制或解析JavaScript媒体查询字符串。

主要缺点是无法自动对浏览器视口尺寸的更改作出反应。如果用户将手机从纵向旋转到横向，JavaScript永远不会知道。您可以经常轮询更改，但这是低效的，并且会导致您在演示中看到的时间延迟。

监视CSS自定义属性是一种新颖的技术，但只有在以下情况下才实用：

• 布局可以固定在页面最初呈现的位置。一个信息亭或销售点终端是可能的，但它们可能有固定的分辨率和单一的布局，因此JavaScript媒体查询变得无关紧要。
• 该网站或应用程序已经频繁运行基于时间的功能，如游戏动画。可以同时检查自定义属性，以确定是否需要更改布局。

选项 3： 使用matchMedia API

matchMedia API有点不同寻常，但它允许您实现JavaScript媒体查询。IE10以上的大多数浏览器都支持它。构造函数返回一个MediaQueryList对象，该对象的matches属性针对其特定的媒体查询计算为true或false。

当浏览器视口宽度为800px或更大时，以下代码输出true：

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
console.log( mqLarge.matches );

“change”事件可应用于MediaQueryList对象。每次matches属性的状态更改时都会触发此操作：它在先前为false（低于800px）后变为true（高于800px），反之亦然。

将MediaQueryList对象作为第一个参数传递给接收处理程序函数：

const mqLarge  = window.matchMedia( '(min-width: 800px)' );
mqLarge.addEventListener('change', mqHandler);

// media query handler function
function mqHandler(e) {
 
  console.log(
    e.matches ? 'large' : 'not large'
  );
 
}

处理程序仅在matches属性更改时运行。当页面最初加载时，它不会运行，因此您可以直接调用函数来确定启动状态：

// initial state
mqHandler(mqLarge);

当您在两个不同的状态之间移动时，API工作得很好。要分析三种或三种以上的状态，如small, medium和large，需要更多的代码。

首先用关联的matchMedia对象定义屏幕状态对象：

const
  screen = {
    small : null,
    medium: window.matchMedia( '(min-width: 400px)' ),
    large : window.matchMedia( '(min-width: 800px)' )
  };

无需在small状态上定义matchMedia对象，因为在small和medium之间移动时，medium事件处理程序将触发。

然后可以为medium和large事件设置事件侦听器。它们调用相同的mqHandler()处理程序函数：

// media query change events
for (let [scr, mq] of Object.entries(screen)) {
  if (mq) mq.addEventListener('change', mqHandler);
}

处理程序函数必须检查所有MediaQueryList对象，以确定当前是活动的small、medium还是large。比赛必须按大小顺序进行，因为999px的宽度可以匹配中型和大型-只有最大的才能“获胜”：

// media query handler function
function mqHandler() {
 
  let size = null;
  for (let [scr, mq] of Object.entries(screen)) {
    if (!mq || mq.matches) size = scr;
  }
 
  console.log(size);
 
}

您可以在此处查看工作演示。（如果使用桌面浏览器，请在新窗口中打开此链接，以便于调整大小。移动用户可以旋转设备。）

使用的示例有：

1. CSS中的媒体查询以设置和显示自定义属性（如上面的选项2所示）。
2. matchMedia对象中的相同媒体查询，以监视JavaScript中的维度更改。JavaScript输出将在同一时间发生变化。

使用matchMedia API的主要优点是：

• 它是事件驱动的，能够高效地处理媒体查询更改。
• 它使用与CSS相同的媒体查询字符串。

缺点是：

• 处理两个或多个媒体查询需要更多的思考和代码逻辑。
• 您可能需要在CSS和JavaScript代码中复制媒体查询字符串。如果不保持同步，这可能会导致错误。

为了避免媒体查询不匹配，可以考虑在构建系统中使用设计令牌。媒体查询字符串在JSON（或类似）文件中定义，值在构建时插入CSS和JavaScript代码。

总之，matchMedia API可能是实现JavaScript媒体查询的最有效、最实用的方法。它有一些怪癖，但在大多数情况下它是最好的选择。

小结

固有的CSS大小选择越来越可行，但媒体查询仍然是大多数网站响应性web设计的基础。它们在处理更复杂的布局和用户偏好（如明暗模式）时总是必需的。

尽可能将媒体查询单独保存到CSS。当您别无选择，只能进入JavaScript领域时，matchMedia API为JavaScript媒体查询组件提供了额外的控制，这些组件需要额外的基于维度的功能。