window.matchMedia()
CSS는 @media를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할
수 있습니다. JavaScript는 window.matchMedia()를 이용해서 가로
크기에 따라 다른 작업을 할 수 있습니다.
기본형
window.matchMedia( mediaQueryString )
- mediaQueryString : CSS 미디어쿼리를 입력합니다.
- window는 생략할 수 있습니다.
예를 들어
window.matchMedia( '( min-width: 480px )' )
는 최소 가로 크기가 480px 이상임을 뜻합니다.
속성
- .media : mediaQueryString을 반환합니다.
- .matches : 범위에 맞는지 검사합니다.
- 범위에 맞으면 true, 맞지 않으면 false를 반환합니다.
예제
예제 1
접속한 웹브라우저의 가로 크기가 600px 이상이면 true를 출력합니다.
범위에 맞지 않으면 false를 출력합니다.
var Media = window.matchMedia( '( min-width: 600px )' );
document.write( '<p>' + Media.media + ' / ' + Media.matches + '</p>' );
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
접속한 웹브라우저의 최소 가로 크기의 범위를 정한 예제입니다.
https://codepen.io/LiveBlogger/pen/pobepJg
예제 3
접속한 웹브라우저의 최대 가로 크기의 범위를 정한 예제입니다.