我正在研究一种让 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
});
所以这段代码只会检查最小宽度:992px,但现在我至少还想要 3 个。
最佳答案
您可以通过两个(或多个)查询或联合查询来匹配多个事物。
多个查询的
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());
关于Javascript 多媒体查询可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34855221/