JavaScript / window.matchMedia() - CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia()

CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다.

문법

window.matchMedia( mediaQueryString )
  • mediaQueryString : CSS 미디어쿼리를 입력합니다.
  • window는 생략할 수 있습니다.

예를 들어

window.matchMedia( '( min-width: 500px )' )

는 500px 이상을 뜻합니다.

속성

  • .media : mediaQueryString을 반환합니다.
  • .matches : 범위에 맞는지 검사합니다. 범위에 맞으면 true, 맞지 않으면 false를 반환합니다.

예제 1

CSS 미디어쿼리와 현재 웹브라우저가 미디워쿼리 범위에 맞는지 출력합니다. 범위에 맞으면 true, 맞지 않으면 false를 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
		<style>
			body {
				font-family: Consolas, sans-serif;
				font-style: italic;
			}
		</style>
  </head>
  <body>
		<script>
			var jbMedia = window.matchMedia( '( min-width: 500px )' );
			document.write( '<p>' + jbMedia.media + ' / ' + jbMedia.matches + '</p>' );
		</script>
  </body>
</html>

예제 2

접속하는 웹브라우저의 가로 크기가 500px 이상이면 600x200 크기의 박스를 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
		<style>
			body {
				font-family: Consolas, sans-serif;
				font-style: italic;
			}
		</style>
  </head>
  <body>
		<script>
			var jbMedia = window.matchMedia( '( min-width: 500px )' );
			document.write( '<p>' + jbMedia.media + ' / ' + jbMedia.matches + '</p>' );
			if ( jbMedia.matches == true ) {
				document.write( '<div style="width: 600px; height: 200px; margin: 30px auto; border: 5px solid #dadada;"></div>' );
			}
		</script>
  </body>
</html>

IE 브라우저 지원

인터넷 익스플로러는 IE 10 이상에서 사용할 수 있습니다. IE 9 이하를 지원해야 한다면 사용하면 안됩니다.

JavaScript 강좌