条件媒体查询 window.matchMedia

Question

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

我已经阅读了 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()，因此您必须刷新页面才能看到它。

试试看：

使windows小于700px，刷新
使 window 大于 700px，刷新
注意区别:)

换句话说：

$(document).ready(your function)

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

或者，使用此 fiddle 和运行。使结果 window 大于或小于 700px，然后再次运行。

如果每次 window 宽度调整大小时都需要运行它，我会建议绑定到 window.onresize 就像我在这个fiddle with execution on resize event

注意 console.log 我放在那里是为了让你看到它是如何以及何时被触发的，你想在投入生产之前将其删除 ;)

条件媒体查询 window.matchMedia

Conditional Media Queries window.matchMedia

javascript

css

jquery

matchmedia