是否可以在 javascript 中使用类似 css 的媒体查询？答案

【问题标题】：Is it possible to use css like media queries in javascript?是否可以在 javascript 中使用类似 css 的媒体查询？
【发布时间】：2014-03-11 23:28:49
【问题描述】：

我想知道是否有办法在 javascript 中使用媒体查询，就像我在 CSS 中使用它一样？我想处理 device-width 或 orientation 并触发一个函数。

现在我正在使用此代码：

window.onresize = function(event) {
    /* test for various sizes */
};

但这对我没有好处，我不知道如何使它工作。

我需要它在没有第三方库的情况下在最新的 chrome 中工作，我不确定它是否可能。

【问题讨论】：

图书馆有什么问题？
我们不允许在当前项目中使用第三方库。它需要很轻。

标签： javascript media-queries

【解决方案1】：

我建议使用window.matchMedia 方法，它允许您测试特定的媒体查询并在匹配或不匹配时添加事件侦听器。

例子：

var mq = window.matchMedia("(max-width: 600px)");
mq.addListener(function(event){
    if (event.matches) {
        console.log("Small Screen mode !");
    }
});

示例 2：

onOrientationChange = function(event){
    if (event.matches) {
        console.log("Portrait mode!");
    }
};

var mq = window.matchMedia("(orientation: portrait)");
mq.addListener(onOrientationChange);

/* ... /*

/* When you no longer need to receive notifications , you can remove the listener */

mq.removeListener(onOrientationChange);

此 API 受支持：Chrome 9+、Firefox 6+、IE10+

MDN 的其他信息

【讨论】：

谢谢谢谢..这正是我想要的。

【解决方案2】：

查看Responsive JavaScript。听起来它会满足您的需求。

【讨论】：

【解决方案3】：

尝试使用 matchMedia (jQuery)

// media query event handler
if (matchMedia) {
    var 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
    }

}

【讨论】：