[JavaScript] matchMedia(), resize(브라우저 사이즈 이벤트)

브라우저 사이즈에 다른 미디어쿼리를 제어하는 메서드.

window.matchMedia();
// 미디어쿼리 객체 반환

matchMedia('(min-width: 768px)');

matchMedia('screen and (min-width: 768px) and (max-width: 1241px)');
  
matchMedia('(min-width: 768px)').matches;
  // 범위가 맞는 지 true false로 반환

 

 const mq = matchMedia('(min-width:768px)');
 const bgColor = (color) => {
  document.body.style.background = color;
  }

 if(mq.matches) { //브라우저 너비가 768px 이상이면 true, 이하면 false
  bgColor('orange')
  document.body.innerHTML = '<h1>768px 이상의 화면입니다.</h1>'
 } else {
  bgColor('lightskyblue')
  document.body.innerHTML = '<h1>768px 이하의 화면입니다.</h1>'
 }

 

단, 스크립트로 이렇게만 작성하면 브라우저를 새로고침하지 않는 이상 즉각적으로 적용되지 않음.

 

resize

이벤트의 속성으로 윈도우(브라우저)의 사이즈가 변할 때마다 이벤트 발생.

      // 윈도우(브라우저)의 사이즈가 변할 때 이벤트 발생.
      window.addEventListener("resize", () => {
        console.log('리사이즈 실행')
        mq.matches ? bgColor("orange", "이상") : bgColor("lightskyblue", "이하");
      });
      // 최초 한 번의 실행이 되려면 브라우저 사이즈가 무조건 변해야 함.

사이즈가 변할 때마다 console.log 출력