JavaScript를 사용하여 미디어 쿼리 사용 방법
- 이전 페이지 draaggable HTML 요소
- 다음 페이지 문법 강조기
JavaScript를 사용하여 미디어 쿼리 사용
미디어 쿼리는 CSS3에서 도입되었으며, 반응형 웹 디자인의 핵심 요소 중 하나입니다. 미디어 쿼리는 모든 장치(데스크톱, 노트북, 태블릿, 스마트폰 등)에서 웹 페이지가 잘 표시되도록 뷰포트의 너비와 높이를 결정합니다.
window.matchMedia() 메서드는 지정된 CSS 미디어 쿼리 문자열의 결과를 나타내는 MediaQueryList 객체를 반환합니다.matchMedia() 메서드의 값은 CSS @media 규칙의 어떤 미디어 특성도 예를 들어 min-height、min-width、orientation 와 같습니다.
예제
화면 너비가 700픽셀 이하 또는 같다면 배경색을 노랑으로 변경합니다. 너비가 700픽셀보다 크면 핑크로 변경합니다：
function myFunction(x) {
if (x.matches) { // 미디어 쿼리가 일치하면
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// MediaQueryList 객체 생성
var x = window.matchMedia("(max-width: 700px)");
// 실행 중 리스너 함수 호출
myFunction(x);
// 상태 변경 시 리스너 함수 추가
x.addEventListener("change", function() {
myFunction(x);
);
관련 페이지
튜토리얼：CSS 미디어 쿼리
튜토리얼：반응형 웹 디자인
- 이전 페이지 draaggable HTML 요소
- 다음 페이지 문법 강조기
