Question

我想知道是否有办法在 javascript 中使用媒体查询，就像我在CSS中使用它一样？我想处理设备宽度或方向并触发一个功能。

现在我正在使用此代码：

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

但这对我没有好处，我也不知道如何让它发挥作用。

我需要它使用最新的chrome而没有第三个奇偶校验库，我不确定它是否可行。

Answer 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

的其他信息

Answer 2

结帐Responsive JavaScript。听起来它会做你想要的。

Answer 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
    }

}

是否可以在javascript中使用像媒体查询这样的CSS？

3 个答案: