[Window] JS - matchMedia() 메서드 ★ - 미디어쿼리리스트 객체 (MediaQueryList) 반환 (IE10 이상) + 반응형배경색

1. window.matchMedia() 예제 - 현재창크기와 한번 비교
2. window.matchMedia() 정의
3. 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 속성 - 배경색 지정.