在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样式表：

<link rel="stylesheet" media="screen and (min-width: 800px)" href="wide.css" />

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

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

请注意，应避免使用@import，因为每个导入的CSS文件都是渲染块。HTML的<link>标记是并行下载的，而@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维护。

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

例如，<article>和<aside>在<main>容器内：

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

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

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

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

当支持媒体查询且屏幕超过特定宽度（例如500px）时，<article>和<aside>元素可以水平放置。本例使用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应用程序的功能。
• 基于触摸的游戏必须更改<canvas>布局或调整控制按钮。
• 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中输出该值（但请注意，它必须包含在单引号或双引号中）：