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 이하를 지원해야 한다면 사용하면 안됩니다.