목차
- window.matchMedia() 예제 - 현재창크기와 한번 비교
- window.matchMedia() 정의
- window.matchMedia() 예제 - 반응형 배경색 (= 화면크기에 따라 배경색 변경)
window.matchMedia() 예제 - 현재창크기와 한번 비교
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("demo");
if (window.matchMedia("(max-width: 700px)").matches) {
x.innerHTML = "700 픽셀 이하 ";
} else {
x.innerHTML = "700 픽셀 초과";
}
}
</script>
결과보기
window.matchMedia() 정의
지정된 CSS 미디어쿼리 문자열의 결과를 나타내는 MediaQueryList 객체 반환.
1.
값은 min-height, min-width, orientation 등과 같은 CSS @media 규칙 미디어 기능 중 하나 일 수 있음.
2.
MediaQueryList 객체는 2개 속성과 2개 메서드 갖음.
[속성]
matches
쿼리 결과 참거짓 확인. (※ 문서가 미디어 쿼리 목록과 일치하면 true, 그렇지 않으면 false 반환.)
media
직렬화 된 미디어 쿼리 목록을 나타내는 문자열
[메서드]
addListener (functionref)
미디어쿼리의 평가 결과가 변경될 때마다 실행되는 새 리스너 함수 추가.
removeListener (functionref)
미디어쿼리 목록에서 이전에 추가 된 리스너 함수 제거.
(지정된 리스너가 목록에 없으면 아무 것도 수행 안 함.)
3.
IE10 이상 최신 브라우저 모두 지원.
window.matchMedia() 예제 - 반응형 배경색 (= 화면크기에 따라 배경색 변경)
<h1>홈짱닷컴 Homzzang.com</h1>
<script>
function homzzang(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)")
homzzang(x) // Call listener function at run time
x.addListener(homzzang) // Attach listener function on state changes
</script>
결과보기
PS. CSS background-color 속성 - 배경색 지정.
