방법 - JavaScript를 사용한 미디어 쿼리
예시
뷰포트 너비가 700픽셀 이하인 경우 배경색을 노란색으로 변경합니다. 700보다 크면 분홍색으로 변경
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
JavaScript에서 미디어 쿼리 사용하기
미디어 쿼리는 CSS3에서 도입되었으며 반응형 웹 디자인의 핵심 요소 중 하나입니다. 미디어 쿼리는 웹 페이지가 모든 장치(데스크톱, 랩톱, 태블릿, 휴대폰 등)에서 보기 좋게 표시되도록 뷰포트의 너비와 높이를 결정하는 데 사용됩니다.
window.matchMedia () 메서드는 지정된 CSS 미디어 쿼리 문자열의 결과를 나타내는 MediaQueryList 객체를 반환합니다. matchMedia() 메서드의 값은 최소 높이, 최소 너비, 방향 등과 같은 CSS @media 규칙 의 미디어 기능 중 하나일 수 있습니다.
CSS 미디어 쿼리 자습서 에서 미디어 쿼리에 대해 자세히 알아보십시오.
반응형 웹 디자인 자습서 에서 반응형 디자인에 대해 자세히 알아보십시오.
JavaScript 참조에서 window.matchMedia() 메서드에 대해 자세히 알아보세요 .