Window matchMedia() 메서드

정의와 사용법

matchMedia() 메서드는 쿼리 결과를 포함한 MediaQueryList를 반환합니다.

다른 것을 참조하세요：

MediaQueryList 객체

미디어 쿼리

matchMedia() 메서드의 미디어 쿼리는 CSS @media 규칙의 어떤 미디어 특성도 될 수 있습니다. 예를 들어 min-height, min-width, orientation 등입니다.

예제

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

예제

예제 1

화면/화면 너비가 700픽셀 이상인가요：

if (window.matchMedia("(max-width: 700px)").matches) {
  // 화면 너비가 700픽셀 이하 또는 같습니다
}
  // 화면 너비가 700픽셀 이상
}

직접 시험해보세요

예제 설명

이 예제는 미디어 쿼리를 실행하고 현재 윈도우 상태와 비교합니다。

윈도우 상태가 변경될 때 반응형 미디어 쿼리를 실행하려면 MediaQueryList 객체에 이벤트 리스너를 추가하세요（다음 '더 많은 예제'를 참조하세요）：

예제 2

화면 너비가 500픽셀 이하이면 배경색을 노랑으로, 그렇지 않으면 핑크로 설정합니다：

// 매칭 함수를 생성합니다
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // MediaQueryList 객체를 생성합니다
const mmObj = window.matchMedia("(max-width: 700px)");
// 실행 중에 match 함수를 호출합니다：
myFunction(mmObj);
// match 함수를 상태 변경 감지기로 추가합니다：
mmObj.addListener(myFunction);

직접 시험해보세요

문법

window.matchMedia("mediaQuery)

파라미터

파라미터 설명
mediaQuery 필수. 미디어 쿼리를 나타내는 문자열.

반환 값

타입 설명
객체 미디어 쿼리 결과를 포함한 MediaQueryList 객체.

브라우저 지원

모든 브라우저가 지원합니다 matchMedia()：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 11 지원 지원 지원 지원