Условные медиазапросы window.matchMedia

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)

Ваша функция выполняется только один раз для каждой загрузки страницы.

В качестве альтернативы, используйте эту скрипку и запустите ее. Сделайте окно результатов больше или меньше чем 700px и запустите его снова.

Если вам нужно запускать его каждый раз, когда ширина окна изменяется, я бы рекомендовал привязать кwindow.onresize как я делал в этой скрипке с выполнением события resize

Обратите внимание на console.log, который я разместил там, чтобы вы увидели, как и когда он запускается, вы хотите удалить его перед началом производства;)