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

/* 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媒体查询组件提供了额外的控制，这些组件需要额外的基于维度的功能。

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家

阿里云企业补贴进行中： 马上申请

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠