Window matchMedia() 메서드

JavaScript Window 객체

matchMedia()메서드는 새로운 MediaQueryList 객체를 반환하며, 이 객체는 지정된 매체 쿼리 문자열의 해석 결과를 나타냅니다.

matchMedia() 메서드의 값은 다음과 같습니다:CSS @media 규칙의모든 매체 기능, 예를 들어 min-높이, min-너비, 방향, orientation 등.

문법：

window.matchMedia(mediaQueryString)

if　(window.matchMedia("(min-width:　500px)").matches) {
　　　/*　비주얼 포트 viewport 최소值为500픽셀 너비　*/
}
　　　/*　비주얼 포트 viewport 너비가 작은500픽셀　*/
}

브라우저 호환성

표에서의 숫자는 matchMedia() 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다：

파라미터 값

기술 세부 사항

더 많은 예제

화면 너비가 00픽셀 이하 또는 같다면600픽셀 이하라면 배경색은珊瑚색이 됩니다. 만약 크기가 크다면600, 그렇다면 색상은 연녹색이 됩니다:

var size = window.matchMedia("(max-width:　600px)")
myFunc(size)　//　실행 중 리스너 함수 호출
size.addListener(myFunc)　//　상태 변경 시 리스너 함수 추가
function myFunc(size) {
　　if (size.matches) {
　else {
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}

관련 참조

CSS 가이드:CSS 미디어 쿼리

JavaScript Window 객체