对于构建网站的人来说，响应式网页设计 已经成为确保内容尽可能多地提供给用户的自然方法。这通常是通过 CSS 媒体查询 来实现的。但是，也存在 JavaScript 替代方案。

介绍 window.matchMedia

在 JavaScript 中使用媒体查询的方法是通过 window.matchMedia。基本上，您只需使用与 CSS 相同的方法，但使用 JavaScript 调用

var widthQuery = window.matchMedia("(min-width: 600px)");

此查询返回一个 MediaQueryList 对象，您可以对其执行以下操作

matches

查询是否匹配的布尔值。

media

序列化媒体查询列表。

addListener

向媒体查询添加事件监听器。比轮询值或类似操作更受欢迎。

removeListener

从媒体查询中删除事件监听器。

因此，确定媒体查询是否匹配的简单方法是使用 matches 属性

var widthMatch = window.matchMedia("(min-height: 500px)").matches;

添加监听器非常容易

function getOrientationValue (mediaQueryList) {
    console.log(mediaQueryList.matches);
}

portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
portraitOrientationCheck.addListener(getOrientationValue);

演示和代码

我整理了一个 window.matchMedia 演示，您可以在其中看到一些查询的实际操作。尝试调整窗口大小并观察值的变化。

该演示的完整 JavaScript 代码，当然可以在 GitHub 上获得，如下所示

(function () {
    var matchMediaSupported = document.querySelector("#matchmedia-supported"),
        width600 = document.querySelector("#width-600"),
        height500 = document.querySelector("#height-500"),
        portraitOrientation = document.querySelector("#portrait-orientation"),
        width600Check,
        height500Check,
        portraitOrientationCheck;

    if (window.matchMedia) {
        matchMediaSupported.innerHTML = "supported";

        // Establishing media check
        width600Check = window.matchMedia("(min-width: 600px)"),
        height500Check = window.matchMedia("(min-height: 500px)"),
        portraitOrientationCheck = window.matchMedia("(orientation: portrait)");

        // Add listeners for detecting changes
        width600Check.addListener(setWidthValue);
        height500Check.addListener(setHeightValue);
        portraitOrientationCheck.addListener(setOrientationValue);
    }

    function setWidthValue (mediaQueryList) {
        width600.innerHTML = mediaQueryList.media;
    }

    function setHeightValue (mediaQueryList) {
        height500.innerHTML = mediaQueryList.matches;
    }

    function setOrientationValue (mediaQueryList) {
        portraitOrientation.innerHTML = mediaQueryList.matches;
    }

    // Setting initial values at load
    function setValues () {
        width600.innerHTML = width600Check.matches;
        height500.innerHTML = height500Check.matches;
        portraitOrientation.innerHTML = portraitOrientationCheck.matches;
    }

    window.addEventListener("DOMContentLoaded", setValues, false);
})();

Web 浏览器支持

目前，window.matchMedia 已在以下浏览器中实现

• Firefox 6+
• Google Chrome 9+
• Safari 5.1+。注意：不支持 addListener。
• Firefox 移动版
• Android 上的 Google Chrome 测试版。注意：不支持 addListener。
• iOS 上的 Safari 5。注意：不支持 addListener。
• Android 原生浏览器。注意：不支持 addListener。

它也计划在 Internet Explorer 10 中实现。

对于较旧/不支持的 Web 浏览器，您可以尝试使用 matchMedia() polyfill，虽然它不支持 addListener。