Javascript 多种媒体查询可能吗？答案

【问题标题】：Javascript multiple media queries possible?Javascript 多种媒体查询可能吗？
【发布时间】：2016-01-18 21:13:28
【问题描述】：

我正在研究一种让 JavaScript 理解多个媒体查询的方法。此时我有以下代码来检查浏览器的宽度，但我想创建更多查询。 Google（和 Stack）只向我展示了我已经编写的代码。我看到的唯一方法是使用 enquire.js，但我想知道是否有其他方法。

$(function() {
// Screen width check 
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 992px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// Run function mq (check screen width)
function WidthChange(mq) {
    // Screen size +992px
    if (mq.matches) {
        .....
    }
    // Screen size -992px
    else {
        .....           
    }
// End widthChange(mq) function
}
// End Function script
});

所以这段代码只会检查 min-width: 992px，但现在我想要至少 3 个。

【问题讨论】：

明确一点，您的目标是找出用户浏览器的屏幕宽度吗？
@EthanFischer 不，我想要 Javascript/Jquery 中的媒体屏幕（最小宽度 999px）{} 等 CSS 媒体查询。

标签： javascript jquery media-queries

【解决方案1】：

您可以通过两个（或多个）查询或联合查询来匹配多个内容。

多个查询的

function screenIsWide() {
  var mq = window.matchMedia("(min-width: 992px)");
  return mq.matches;
}

function screenIsToWide() {
  var mq = window.matchMedia("(max-width: 9001px)");
  return mq.matches;
}

function isPrint() {
   var mq = window.matchMedia("print");
   return mq.matches;
}

console.log(screenIsWide() + " " + isPrint() + " " + screenIsToWide());

if(screenIsWide() && isPrint() && screenIsToWide()) {
   // do stuff
}

联合

您可以像在普通 CSS 中一样使这变得非常简单在此处阅读更多信息w3schools.com

function isScreenAndIsWide() {
  var mq = window.matchMedia("screen and (min-width: 992px)");
  return mq.matches;
}

console.log(isScreenAndIsWide());

【讨论】：