window.matchMedia("(最大宽度：1700px)");不工作？答案

【问题标题】：window.matchMedia("(max-width: 1700px)"); does not work?window.matchMedia("(最大宽度：1700px)");不工作？
【发布时间】：2019-05-22 21:54:39
【问题描述】：

嘿朋友们，当页面为 1700 像素或更小时，我正在尝试使用 window.matchMedia("(max-width: 1700px)") 在 html 中添加一些元素。现在我只是想通过在屏幕上显示一个功能警报“哟”来测试它。这和我试图改变的其他事情一样不起作用？有什么想法吗？

https://jsfiddle.net/yat5ncmk/6/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;

x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
	num--;
	if(num > 0) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 4;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}
})

rightArrow.addEventListener('click', function() {
	num++;
	if(num <= 4) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 1;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}	
})

function adjustMenuDesign(width) {
    if (width.matches) { // If media query matches
	    alert('yo');
	} 
}

window.sr = ScrollReveal();

sr.reveal('.logo-wrap', {
	duration: 2000
});

sr.reveal('.w1', {
	duration: 2000,
	origin: 'bottom'
});

sr.reveal('.w2', {
	duration: 3000,
	origin: 'bottom'
});

sr.reveal('.w3', {
	duration: 4000,
	origin: 'bottom'
});

sr.reveal('.hours-line-left', {
	duration: 1000,
	origin: 'left',
	distance: '200px'
});

sr.reveal('.hours-line-right', {
	duration: 1000,
	origin: 'right',
	distance: '200px'
});

sr.reveal('.contact-line', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});

sr.reveal('.burrito', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.taco', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.guac', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.nachos', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});

sr.reveal('.hot', {
	duration: 1000,
	origin: 'left',
	distance: '250px'
});

sr.reveal('.back-to-top', {
	duration: 1000,
	origin: 'bottom',
});

sr.reveal('.btp-arrow', {
	duration: 1500,
	origin: 'top',
	distance: '250px'
});

【问题讨论】：

尝试查看您的控制台日志，这 -> x.addEventListener(adjustMenuDesign); 是无效代码。
噢，谢谢@Keith。虽然有几个问题。警报现在似乎有效，但它只发出一次警报？当我在 1700 像素以下和以上来回调整宽度时，它不会一直发出警报吗？我还尝试更改图像滑块上箭头的颜色（我已经将其声明为 const），但这不起作用？
您需要再次检查调整大小。这可能就是您的x.addEventListener( 的本意，.. 我将在此处更新您的 sn-p 作为答案以显示更改。
好的，谢谢，谢谢
我也试过window.addEventListener('onresize', adjustMenuDesign);和x.addEventListener('onresize', adjustMenuDesign);和window.addEventListener('resize', adjustMenuDesign);和x.addEventListener('resize', adjustMenuDesign);这些都不起作用？

标签： javascript css media-queries matchmedia

【解决方案1】：

几个问题..

x.addEventListener(adjustMenuDesign);

错误，因为 addEventListener 需要一个事件和一个回调。但是您可能打算将其添加到调整大小事件中。

window.addEventListener("resize", adjustMenuDesign);

此外，您还需要在调整大小时再次运行 matchMedia 查询，因此将这段代码移动到 adjustMenuDesign 在这里会很有意义。

以下是这些更改的工作小提琴。

https://jsfiddle.net/veckopab/

【讨论】：