How To - JavaScript를 사용한 미디어 쿼리

w3.css

JavaScript를 사용한 미디어 쿼리

미디어 쿼리는 CSS3에서 도입되었으며, 반응형 웹 디자인의 핵심 요소 중 하나다. 미디어 쿼리는 뷰포트의 너비와 높이를 결정하여 모든 기기(데스크톱, 랩톱, 태블릿, 휴대폰 등)에서 웹 페이지가 보기 좋게 보이도록 하는 데 사용된다.

window.matchMedia() 메서드는 지정된 CSS 미디어 쿼리 문자열의 결과를 나타내는 MediaQueryList 객체를 반환한다. matchMedia() 메서드의 값은 min-height, min-width, orientation 등과 같은 CSS @media 규칙 의 미디어 기능 중 하나일 수 있다.

JavaScript로 미디어 쿼리 사용

뷰포트가 700픽셀 이하이면 배경색을 노란색으로 변경합니다. 700보다 크면 분홍색으로 변경한다.

1단계) JavaScript 추가

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

// Create a MediaQueryList object
var x = window.matchMedia("(max-width: 700px)")

// Call listener function at run time
myFunction(x);

// Attach listener function on state changes
x.addEventListener("change", function() {
  myFunction(x);
});

기본 예시

예제 보기