@matchmedia_如何在JavaScript和matchMedia中使用媒体查询

心已赠人 2022-12-03 08:59 150阅读 0赞

@matchmedia

*This article from 2011 was updated in 2018.*

*2011年的文章在2018年进行了更新。*

**When it was first introduced, [responsive design][] was one of the most exciting web layout concepts since CSS replaced tables. The underlying technology uses [media queries][] to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets.**

**自从CSS取代表格以来， [自适应设计][responsive design]是最令人兴奋的Web布局概念之一。** **基础技术使用[媒体查询][media queries]来确定查看设备的类型，宽度，高度，方向，分辨率，长宽比和颜色深度，以服务于不同的样式表。**

If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript, as this article will explain.

如果您认为响应式设计仅保留用于CSS布局，您将很高兴听到媒体查询也可以在JavaScript中使用，如本文所述。

## CSS中的媒体查询 **(**Media Queries in CSS**)** ##

In the following example, cssbasic.css is served to all devices. But, if it’s a screen with a horizontal width of 500 pixels or greater, csswide.css is also sent:

在以下示例中，cssbasic.css被提供给所有设备。 但是，如果屏幕水平宽度为500像素或更大，则还会发送csswide.css：

The possibilities are endless and the technique has long been exploited by most websites out there on the Internet. Resizing the width of your browser triggers changes in the layout of the webpage.

可能性是无止境的，并且该技术长期以来一直被Internet上的大多数网站所采用。 调整浏览器宽度的大小会触发网页布局的更改。

With **media queries** nowadays it’s easy to adapt the design or resize elements in CSS. But what if you need to change the content or functionality? For example, on smaller screens you might want to use a shorter headline, fewer JavaScript libraries, or modify the actions of a widget.

如今，借助**媒体查询，**可以轻松调整CSS中的设计或调整元素的大小。 但是，如果您需要更改内容或功能怎么办？ 例如，在较小的屏幕上，您可能希望使用较短的标题，较少JavaScript库或修改小部件的操作。

It’s possible to analyze the viewport size in JavaScript but it’s a little messy:

可以使用JavaScript分析视口大小，但有点混乱：

*  Most browsers support `window.innerWidth` and `window.innerHeight`. (IE before version 10 in quirks mode required `document.body.clientWidth` and `document.body.clientHeight`.)
    
    大多数浏览器都支持`window.innerWidth`和`window.innerHeight` 。 (版本10之前的怪癖模式下的IE需要`document.body.clientWidth`和`document.body.clientHeight` 。)
 *  `window.onresize`
    
    `window.onresize`
 *  All the main browsers support `document.documentElement.clientWidth` and `document.documentElement.clientHeight` but it’s inconsistent. Either the window or document dimensions will be returned depending on the browser and mode.
    
    所有主要的浏览器都支持`document.documentElement.clientWidth`和`document.documentElement.clientHeight`但是不一致。 根据浏览器和模式，将返回窗口或文档尺寸。

Even if you successfully detect viewport dimension changes, you must calculate factors such as orientation and aspect ratios yourself. There’s no guarantee it’ll match your browser’s assumptions when it applies media query rules in CSS.

即使您成功检测到视口尺寸变化，也必须自己计算诸如方向和纵横比之类的因素。 当在CSS中应用媒体查询规则时，无法保证它会符合您浏览器的假设。

## 如何使用JavaScript代码编写媒体查询 **(**How to Write Media Queries with JavaScript Code**)** ##

Fortunately, it’s possible to respond to CSS3 media query state changes within JavaScript. The [key API is `window.matchMedia`][key API is _window.matchMedia]. This is passed a media query string identical to those used in CSS media queries:

幸运的是，可以在JavaScript中响应CSS3媒体查询状态更改。 [关键的API是`window.matchMedia`][key API is _window.matchMedia] 。 这会传递一个与CSS媒体查询中使用的相同的媒体查询字符串：

const mq = window.matchMedia( "(min-width: 500px)" );

The `matches` property returns true or false depending on the query result. For example:

`matches`属性根据查询结果返回true或false。 例如：

if (mq.matches) {
    // window width is at least 500px
    } else {
    // window width is less than 500px
    }

You can also add an event listener which fires when a change is detected:

您还可以添加事件侦听器，该侦听器在检测到更改时将触发：

// media query event handler
    if (matchMedia) {
    const mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
    }
    
    // media query change
    function WidthChange(mq) {
    if (mq.matches) {
    // window width is at least 500px
    } else {
    // window width is less than 500px
    }
    
    }

You should also call the handler directly after defining the event. This will ensure your code can initialize itself during or after the page has loaded. Without it, `WidthChange()` would never be called if the user did not change their browser dimensions.

您还应该在定义事件之后直接调用处理程序。 这将确保您的代码可以在页面加载期间或之后进行初始化。 没有它，如果用户不更改其浏览器尺寸，将永远不会调用`WidthChange()` 。

At the time of writing, [`matchMedia` has excellent browser support across the board][matchMedia_ has excellent browser support across the board], so there’s no reason why you can’t use it in production.

在撰写本文时， [`matchMedia`具有全面的出色浏览器支持][matchMedia_ has excellent browser support across the board] ，因此没有理由不能在生产中使用它。

Check how the text dynamically changes in the demo below from *more than 500 pixels* to *less than 500 pixels* as you resize your browser window. Alternatively, [download the sample code][]:

在调整浏览器窗口大小时，请检查下面演示中的文本如何从*大于500像素*动态更改为*小于500像素* 。 或者， [下载示例代码][download the sample code] ：

See the Pen [CSS Media Queries with JavaScript][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [提供的带JavaScript][CSS Media Queries with JavaScript]的Pen [CSS媒体查询][CSS Media Queries with JavaScript] 。

> 翻译自: [https://www.sitepoint.com/javascript-media-queries/][https_www.sitepoint.com_javascript-media-queries]

@matchmedia

[responsive design]: https://www.sitepoint.com/versioning-show-episode-16-with-ethan-marcotte/
[media queries]: https://www.sitepoint.com/atoz-css-media-queries/
[key API is _window.matchMedia]: https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia
[matchMedia_ has excellent browser support across the board]: http://caniuse.com/#feat=matchmedia
[download the sample code]: https://blogs.sitepointstatic.com/examples/tech/jsmediaqueries/jsmediaqueries.zip
[CSS Media Queries with JavaScript]: https://codepen.io/SitePoint/pen/yoyXoM/
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io
[https_www.sitepoint.com_javascript-media-queries]: https://www.sitepoint.com/javascript-media-queries/