Question

我正在使用window.matchMedia()，当达到max or min width时，似乎无法获得应用辅助类的功能。我通过简单的字体大小更改重新创建了下面的问题。

我已经阅读了matchMedia()，我尝试了两种不同的方式（两种方式都包括在内）。我是否需要包含最小值和最大值才能使函数执行？或者我在函数本身的实际结构中遗漏了什么？

$(document).ready(function() {
	
	var mq = window.matchMedia('(max-width: 700px)');
	
	if( mq.matches ) {
		$('.title').addClass('big')
	} else {
		$('.title').removeClass('big');
	}
});


/*
Second method I tried

$(function() {
 if( window.matchMedia('(max-width: 700px)').matches){
		$('.title').addClass('big')
	} else {
		$('.title').removeClass('big');
	}

});


*/

.title {
	font-size: 20px;
}

.big {
	font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title">This is a title</h1>

Answer 1

它正在工作，也许你期望它检测屏幕调整大小？你已将它绑定到document.ready（），因此你必须刷新页面才能看到它。

尝试一下：

使窗口小于700px，刷新
使窗口大于700px，刷新
通知差异：）

换句话说：

$(document).ready(your function)

您的功能仅在每次加载页面时执行一次。

或者，使用此fiddle并运行它。使结果窗口大于或小于700px并再次运行。

如果您需要在每次窗口宽度调整时运行它，我建议绑定到window.onresize ，就像我在此fiddle with execution on resize event

中所做的那样

注意我在那里放置的console.log，看看它是如何以及何时被触发的，你想在开始制作之前删除它;）

条件媒体查询window.matchMedia

1 个答案: