[JS] window.matchMedia css의 미디어쿼리 같은 기능

window.matchMedia(mediaQueryString)

 

[주의]

window.matchMedia('(min-width: 400px)');

@media (min-width: 400px) {}

mediaQueryString에 () 괄호를 넣어줘야 한다.

css의 미디어 쿼리 값을 넣을 때 () 괄호를 사용하듯이...

---

[예제]

if (window.matchMedia("(min-width: 400px)").matches) {
  /* 뷰포트 너비가 400 픽셀 이상 */
} else {
  /* 뷰포트 너비가 400 픽셀 미만 */
}

 

---

[공부좌표]

https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia