Javascript多媒體查詢可能嗎？

我正在研究一種JavaScript方法來理解多個媒體查詢。在這一點上，我有以下代碼來檢查瀏覽器的寬度，但我想創建更多的查詢。 Google（和Stack）僅向我顯示了我已經編寫的代碼。我所看到的唯一方法是使用enquire.js，但我想知道是否沒有其他方法。Javascript多媒體查詢可能嗎？

$(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，但現在我想ATLEAST 3個。

來源

2016-01-18 Jeff

只是要清楚正常的CSS ，是您的目標是找出用戶br的屏幕寬度owser？ –

@EthanFischer不，我想在Javascript/Jquery中使用媒體屏幕（min-width 999px）{}等CSS媒體查詢。 – Jeff

你可以通過兩個（或更多）查詢或聯合查詢來匹配多個事物。

多個查詢的

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 
}

聯合

可以使這個很容易就如同在這裏閱讀更多w3schools.com

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

console.log(isScreenAndIsWide());

來源

2016-01-18 13:05:26 arcs

Javascript多媒體查詢可能嗎？

回答

相關問題