javascript 미디어 쿼리 사용 방법 matchMedia()
matchMedia 자바스크립트에도 CSS의 미디어쿼리(Media Queries)와 같은 matchMedia 메서드가 존재합니다. CSS에서 사용하는 미디어쿼리 조건을 자바스크립트에서 그대로 사용할 수 있습니다. if (matchMedia("screen and (min-width: 1024px)").matches) { // 1024px 이상에서 사용할 스크립트 } else { // 1024px 미만에서 사용할 스크립트 } Breakpoint에 도달했을 때 처리 CSS처럼 사용자가 화면을 리사이징할 때 미디어 쿼리의 Breakpoint에 도달할 때 처리해야되는 경우가 있습니다. document view의 크기가 변경될 때 발생하는 resize 이벤트로 처리할수도 있겠지만 좀 더 우아한 방법으로 처리할 수 ..
2021년 04월 18일