사이즈 벗어난 화면 처리하기
- 사이즈를 벗어난 화면을 처리하고 싶을 때
- 스마트폰의 가로, 세로 화면 전환 시 작업을 처리하고 싶을 때
구문
matchMedia(미디어쿼리) 미디어 쿼리 정보
matchMedia(미디어쿼리).addListener(처리) 미디어 쿼리 일치 시 처리
matchMedia(미디어쿼리).matches 미디어 쿼리 일치 여부
설명
matchMedia() 는 인수에 따라 미디어 쿼리의 정보를 반환합니다. 예를 들어 윈도우 창의 가로 길이 500px 이상 을 의미하는 (min-width: 500px;) 를 전달하면 다음과 같은 정보가 반환됩니다. matches 속성은 미디어 쿼리 일치 여부의 진릿값을 가지고 있으며, media 속성은 브라우저가 확인한 쿼리의 문자열을 가집니다.
const mediaQueryList = matchMedia('(min-width: 500px)');
console.log(mediaQueryList);matches 속성 을 사용하면 브라우저 윈도우 창의 크기와 미디어 쿼리의 일치 여부를 확인 가능합니다.
console.log(matchMedia('(max-width: 300px)').matches);
console.log(matchMedia('(min-width: 100px) and (max-width: 700px)').matches);스마트폰의 가로, 세로 전환 확인 등 미디어 쿼리 변화 시점에 따라 처리 작업을 하고 싶을 때는 다음과 같이 콜백Callback 처리를 사용합니다. 콜백 처리는 미디어 쿼리의 상태 변화에 따라 실행합니다.
const mediaQueryList = matchMedia('(orientation: portrait)');
mediaQueryList.addListener(() => {
console.log('디바이스 화면의 방향이 전환되었습니다.');
});콜백 처리는 MediaQueryList를 가져옵니다. 윈도우 창의 크기가 600px 이상인 경우와 미만인 경우에 대해 색상을 변경하는 샘플을 확인합니다. .rectangle 요소에 대해 크기 600px를 기준으로 big-size 클래스를 설정합니다. big-size 요소에 따라 .rectangle 요소의 색이 변합니다.
index.html
<div class="rectangle"></div>style.css
@charset "UTF-8";
.rectangle {
width: 500px;
height: 500px;
background-image: linear-gradient(-135deg, #00aaff, #5500ff);
}
.rectangle.big-size {
background-image: linear-gradient(-135deg, red, #ff00a2);
}script.js
const rectAngle = document.querySelector('.rectangle');
const mediaQueryList = matchMedia('(min-width: 600px)');
mediaQueryList.addListener(mediaQueryList);
function onMediaQueryChange(mediaQueryList) {
if (mediaQueryList.matches === true) {
rectAngle.classList.add('big-size');
console.log('윈도우 창의 크기가 600px 이상입니다.');
} else {
rectAngle.classList.remove('big-size');
console.log('윈도우 창의 크기가 600px 미만입니다.');
}
}
onMediaQueryChange(mediaQueryList);윈도우 창의 크기가 600px를 넘어섰을 때 1회에 한해 처리 작업이 실행되는 것을 콘솔에서 확인할 수 있습니다. resize 이벤트와 달리 matchMedia()는 작업 1회만 실행 되므로, 시스템의 부담을 줄일 수 있다는 장점이 있습니다.
