当屏幕处于特定宽度时，我们希望隐藏一个按钮，而是允许包装 div 可点击。
这种情况应该只发生在以下情况：
@media only screen and (min-width:320px) {
虽然我们可以轻松地 display:none; 和 display:block; 按钮，但当我们想要移除周围的包装 div（在更高的屏幕尺寸上）时，问题就来了，因为如果我们 display: none; 周围的 div，它们的所有内部内容也将被删除！
上面的媒体查询是否有任何 javascript 版本，可以是可靠的跨浏览器和跨操作系统，以便在某些屏幕条件下动态添加和删除元素？
【问题讨论】：
标签： javascript css media-queries
是的，请检查：
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.
});
【讨论】：
不要使用JS直接改变元素的显示属性。改为修改与元素关联的类名。
然后您可以定义display: none 或在您的外部样式表中使用类选择器和媒体查询。
【讨论】：