javascript - css媒体查询有js版本吗？ - 用例场景

Question

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

但是，只有在以下情况下才会发生这种情况:

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

虽然我们可以轻松地 display:none; 和 display:block; 按钮，但是当我们想要删除周围的包装 div(在更大的屏幕尺寸上)时，问题就来了), 因为，如果我们 display: none; 周围的 div，它们里面的所有内容也会被删除!

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

Answer 1

是的，检查一下:

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 */
}

还有像这样的 polyfill:

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

旧版 IE:

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.
});