조건부 미디어 쿼리 window.matchMedia

Question

window.matchMedia()으로 작업 중이며 max or min width에 도달하면 보조 클래스를 적용하는 기능을 얻지 못하는 것 같습니다. 간단한 글꼴 크기 변경으로 문제를 재현했습니다.

나는 matchMedia()을 읽었으며이 두 가지 방법을 시도해 봤습니다. 둘 다 아래에 포함되어 있습니다. 함수를 실행하려면 최소값과 최대 값을 모두 포함해야합니까? 아니면 기능 자체의 실제 구조 내에서 뭔가를 놓치고 있습니까? 그것은이 작동

$(document).ready(function() { 
 
\t 
 
\t var mq = window.matchMedia('(max-width: 700px)'); 
 
\t 
 
\t if(mq.matches) { 
 
\t \t $('.title').addClass('big') 
 
\t } else { 
 
\t \t $('.title').removeClass('big'); 
 
\t } 
 
}); 
 

 

 
/* 
 
Second method I tried 
 

 
$(function() { 
 
if(window.matchMedia('(max-width: 700px)').matches){ 
 
\t \t $('.title').addClass('big') 
 
\t } else { 
 
\t \t $('.title').removeClass('big'); 
 
\t } 
 

 
}); 
 

 

 
*/

.title { 
 
\t font-size: 20px; 
 
} 
 

 
.big { 
 
\t 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) 

너 r 함수는 페이지가로드 될 때마다 한 번만 실행됩니다.

또는 fiddle을 사용하고 실행하십시오. 결과 창을 700px보다 크게 또는 작게 만들고 다시 실행하십시오.

당신은 윈도우 폭이 언제, 어떻게 그것을 당신이 볼 수 있도록 나는이 fiddle with execution on resize event

공지 사항에 내가 거기에 넣어 CONSOLE.LOG 그랬던 것처럼 내가 window.onresize에 바인딩 추천 할 것입니다 크기가 변경 될 때마다 실행해야하는 경우 작동되기 전에 제거하려고합니다.)