如何为某些媒体查询关闭.js

How do I turn off .js for certain media queries?

本文关键字：查询 js 媒体      更新时间：2023-09-26

我有一个使用lightbox.js插件的公文包页面，当我的屏幕大小小于480时，我希望能够关闭它，因为弹出框太大了。有没有办法在css中做到这一点？如果不是，我该如何在.js中进行此操作？

这就是网站http://www.campusphotoservices.org/portfolio.html

您不能直接使用CSS，但使用JavaScript非常简单。

在代码中调用lightbox的位置，只需检查窗口的宽度是否大于480px；否则就做你想做的其他事情。

window.innerWidth

在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/

相关文章：