[JavaScript] 자바스크립트에서 css 미디어쿼리 이벤트 체크

// 미디어쿼리의 조건을 자바스크립트에서 사용할 수 있다.
// 현재 화면이 미디어쿼리의 범위에 들어가면 true를 반환하고 아니면 false를 반환한다.
/* if((matchMedia("(min-width: 1024px)")).matches) {
    // 1024px 이상
    console.log("1024px 이상");
} else {
    // 1024px 미만
    console.log("1024px 이하");
} */
    
var mq = window.matchMedia("(min-width: 1024px)");
// event        
mq.addListener(func);        
function func(mediaQuery) {
    console.log(mediaQuery);
    if (mediaQuery.matches) { 
        console.log("1024이상");
    } else {
        console.log("1024미만");
    }
}    
// load  // 최초 window resize 이벤트로 체크가 안되어 호출함
func(mq);

참고 : https://www.w3schools.com/jsref/met_win_matchmedia.asp