창 matchMedia()
실시예 1
화면/뷰포트가 너비가 700픽셀을 초과합니까?
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
정의 및 사용
이 matchMedia()메서드는 쿼리 결과와 함께 MediaQueryList 를 반환합니다.
또한보십시오:
미디어 쿼리
메서드 의 미디어 쿼리는 최소 높이, 최소 너비, 방향 등과 같은 CSS @media 규칙matchMedia() 의 미디어 기능 중 하나일 수 있습니다
.
예
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
통사론
window.matchMedia(mediaQuery)
매개변수
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
반환 값
| 유형 | 설명 |
| 객체 | 미디어 쿼리 결과가 포함된 MediaQueryList 개체입니다. |
설명된 예
이 페이지의 첫 번째 예는 미디어 쿼리를 실행하고 현재 창 상태와 비교합니다.
창 상태가 변경 될 때마다 반응형 미디어 쿼리 를 실행하려면 MediaQueryList 개체에 이벤트 리스너를 추가합니다(아래 "추가 예제" 참조).
더 많은 예
뷰포트 너비가 500픽셀보다 작거나 같으면 배경색을 노란색으로 설정하고 그렇지 않으면 분홍색으로 설정합니다.
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
브라우저 지원
matchMedia() 모든 최신 브라우저에서 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |