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

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

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

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

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

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

为什么响应式设计很重要？
响应式设计如何工作？
媒体查询最佳实践
媒体查询备选方案
您是否需要JavaScript中的媒体查询？
选项 1：监视视场维度
选项 2：定义和监视CSS自定义属性（可变）
选项 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;
  }
}

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

媒体查询最佳实践

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

小于600px的屏幕宽度使用400px宽的移动式布局。
600px和999px之间的屏幕宽度使用600px宽的平板电脑布局。
大于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中输出该值（但请注意，它必须包含在单引号或双引号中）：

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

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

使用的示例有：

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

使用matchMedia API的主要优点是：

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

缺点是：

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

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

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

小结

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

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

javascript 响应式设计媒体查询

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

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

响应式设计如何工作？

媒体查询最佳实践

媒体查询替代方案

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

选项 1：监视视场维度

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

选项 3：使用matchMedia API

小结

评论留言

取消回复

文章目录

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

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

响应式设计如何工作？

媒体查询最佳实践

媒体查询替代方案

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

选项 1：监视视场维度

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

选项 3： 使用matchMedia API

小结

相关的

评论留言

取消回复

文章目录

选项 3：使用matchMedia API