// 미디어쿼리의 조건을 자바스크립트에서 사용할 수 있다.
// 현재 화면이 미디어쿼리의 범위에 들어가면 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

저작자 표시
신고

댓글을 달아 주세요



티스토리 툴바