有任何js版本的css媒体查询?-用例场景

Is there any js version for css media queries? - a use case scenario

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

当屏幕处于一定宽度时，我们希望隐藏按钮，而允许包装器div可点击。

然而，这只应该发生在:

@media only screen and (min-width:320px) {

虽然我们可以很容易地display:none;和display:block;按钮，问题来了，当我们想要删除周围的包装div(在更高的屏幕尺寸)，因为，如果我们display: none;周围的div，他们所有的内部内容也将被删除!

上面的媒体查询是否有javascript版本，可以跨浏览器和跨操作系统可靠，以便在某些屏幕条件下动态添加和删除元素?

检查一下:

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

语法

mql = window.matchMedia(mediaQueryString)

其中mediaQueryString是一个表示媒体查询的字符串，为其返回一个新的MediaQueryList对象。

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

和这样的填充:

https://github.com/paulirish/matchMedia.js/

老即:

https://github.com/benschwarz/matchMedia.js/tree/IE7-8

如果你只关心一个简单的检查，这里有你可以用jQuery来做，虽然它是相当琐碎的在纯Javascript中做，这只是更容易，因为你的旧的IE要求:

var timeout;
function onWindowResize() {
    var width = $(window).width();
    if (width <= 480) {
        console.log('small');
    } else if (width <= 767) {
        console.log('medium');
    } else if (width <= 1024) {
        console.log('large');
    } else {
        console.log('xlarge');
    }
}
$(window).resize(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        onWindowResize();
    }, 50); // Only resize every 50ms - number up to you.
});

不要使用JS直接改变元素的display属性。修改与元素相关的类名。

然后可以在外部样式表中使用类选择器和媒体查询来定义display: none或其他方式。

相关文章：