是否有可能在javascript中使用CSS類似媒體查詢？

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在被支撐：鉻9+，火狐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 
    } 

}