1

我正在使用window.matchMedia()，当达到 a 时，我似乎无法获得应用辅助类的功能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>

4

1 回答 1

3

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

试试看：

  • 使窗口小于 700px，刷新
  • 使窗口大于 700px，刷新
  • 注意区别:)

换句话说：

$(document).ready(your function)

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

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

如果您每次调整窗口宽度时都需要运行它，我建议您绑定到，window.onresize就像我在这个小提琴中所做的那样，在调整大小事件上执行

注意我放在那里的console.log，以便您查看它是如何以及何时触发的，您想在投入生产之前将其删除；）

于 2017-10-10T15:06:43.910 回答