如何關閉某些媒體查詢的.js？

Question

我有一個使用lightbox .js插件的投資組合頁面，並且我希望在屏幕尺寸小於480時將其關閉，因為該框的彈出窗口太大。 有沒有辦法在CSS中做到這一點？ 如果不是，我該如何在.js中進行處理？

這是網站http://www.campusphotoservices.org/portfolio.html

Answer 1

您不能直接使用CSS做到這一點，但是使用JavaScript相當簡單。

在代碼中調用燈箱的位置，只需檢查窗口的寬度是否大於480px； 否則，做您想做的其他事情。

window.innerWidth

Answer 2

在javascript中，您可以像在CSS中一樣匹配媒體查詢。 窗口上有一個matchMedia（）對象， https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia 。 您可以像在CSS中一樣使用媒體查詢。

var mediaQuery = matchMedia("(min-width: 400px)");
if (mediaQuery.matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

並非所有瀏覽器都支持它，因此您需要使用matchMedia polyfill， https：//github.com/paulirish/matchMedia.js/