条件媒体查询window.matchMedia

Question

我正在使用window.matchMedia()，当到达max or min width时，我似乎无法获得应用次要类的函数。我用一个简单的字体大小改变了下面的问题。

我已经阅读了matchMedia()，并且尝试了这两种不同的方法(这两种方法都包含在下面)。是否需要同时包含min和max值才能执行函数？还是我在函数本身的实际结构中遗漏了什么？

​

$(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()，因此必须刷新页面才能看到它。

试试看：

• 使窗口小于700，刷新
• 使窗口大于700，刷新
• 通知差异:)

换句话说：

$(document).ready(your function)

每次加载页面时，您的函数只执行一次。

或者，使用这个小提琴并运行它。使结果窗口大于或小于700 it并再次运行。

如果每次窗口宽度调整时都需要运行，我建议绑定到window.onresize，就像在这个在调整大小事件时篡改执行中那样

请注意我放在那里的console.log，以查看它是如何触发的，何时触发，您希望在投入生产之前将其删除;)