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

在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中使用更新的属性实现,这些属性本质上适应布局,而无需检查视口尺寸。选择包括:

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

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

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

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

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

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

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

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

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

选项 1:监视视场维度

在媒体查询实施之前的黑暗日子里,这是唯一的选择。JavaScript将侦听浏览器“调整大小”事件,使用window.innerWidthwindow.innerHeight(或旧IE中的document.body.clientWidthdocument.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工作得很好。要分析三种或三种以上的状态,如smallmediumlarge,需要更多的代码。

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

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

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

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

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

处理程序函数必须检查所有MediaQueryList对象,以确定当前是活动的smallmedium还是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媒体查询组件提供了额外的控制,这些组件需要额外的基于维度的功能。

评论留言