미디어 쿼리가 변경될 때 JavaScript에서 알림 받기

미디어 쿼리는 훌륭하고 최신 웹 개발에 잘 사용됩니다.
그러나 특정 미디어 쿼리가 충족되면 JavaScript에 어떻게 알릴 수 있습니까?
matchMedia 라는 창 리스너가 있으며 정확히 이 작업을 수행합니다!

오늘 만들 내용은 다음과 같습니다.

JavaScript 미디어 쿼리 변경 사항

matchMedia를 사용하려면 다음을 호출합니다.

var mediaQuery = window.matchMedia('(max-width: 500px)');

이를 사용하기 위해 리스너를 추가할 수 있습니다.

mediaQuery.addListener(console.log);

이제 콘솔이 열린 상태에서 화면 크기를 조정하면 이 미디어 쿼리가 일치하는 각 콘솔 로그가 실행됩니다.

반환 값에는 참 또는 거짓을 나타내는 MediaQueryListEvent라는 값이 포함된 matches가 있습니다.

콘솔 로그는 멋지지만 실제로는 별로 도움이 되지 않으므로 함수를 추가할 수도 있습니다.

mediaQuery.addListener(alertMe);

function alertMe(e) {
  if (e.matches) {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'red';
  }
}

이제 크기를 조정하고 미디어 쿼리를 치면 예 또는 아니오에 따라 화면이 녹색 또는 빨간색으로 바뀝니다.

데모는 이 Codepen을 참조하십시오.

More on MediaQueryList here MDN Web Docs

브라우저 지원

이 기능은 정말 잘 지원됩니다!
초보자 기능의 경우 확실히 프로젝트에서 사용할 기능입니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나