Question

我有一个使用灯箱.js插件的投资组合页面，当我的屏幕尺寸小于480时，我希望能够将其关闭，因为弹出框太大了。有没有办法在CSS中执行此操作？如果不是我如何在.js中进行此操作？

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

Answer 1

你无法直接使用CSS，但使用JavaScript非常简单。

在代码中您调用lightbox的位置，只需检查窗口的宽度是否大于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/

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

2 个答案: