JavaScript MediaQueryList API
MediaQueryList 객체
MediaQueryList 객체는 미디어 쿼리로부터 정보를 저장합니다.
MediaQueryList 객체는윈도우 객체의 속성.
MediaQueryList 객체는 다음과 같은 방식으로 접근할 수 있습니다:
window.matchMedia() 또는 단순히 matchMedia():
예제
const mqlObj = window.matchMedia(); const mqlObj = matchMedia();
자세히 보기:
MediaQueryList 속성
| 속성 | 설명 |
|---|---|
| matches | 부울 값. 문서가 쿼리와 일치하면 true그렇지 않으면 false |
| media | 문자 값. 미디어 쿼리(리스트) |
MediaQueryList 메소드
| 메소드 | 설명 |
|---|---|
| addListener() | 새로운 리스너 함수를 추가하여 미디어 쿼리의 평가 결과가 변경될 때마다 해당 함수를 실행합니다. |
| removeListener() |
이전에 추가된 리스너 함수를 미디어 쿼리 목록에서 제거합니다. 지정된 리스너가 목록에 없으면 어떤 작업도 수행하지 않습니다. |
미디어 쿼리
matchMedia() 메소드의 미디어 쿼리는 다음과 같습니다 CSS @media 규칙 의 어떤 미디어 특성도, 예를 들어 min-height, min-width, orientation 등이 될 수 있습니다.
예제
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
미디어 타입
| 값 | 설명 |
|---|---|
| all | 기본 설정. 모든 미디어 타입 장치에 사용됩니다. |
| 프린터에 사용됩니다. | |
| screen | 컴퓨터 화면, 태블릿, 스마트폰 등에 사용됩니다. |
| speech | 웹 페이지를 대규모로 "읽기"하는 스크린리더 |
미디어 특성
| 값 | 설명 |
|---|---|
| any-hover | 어떤 입력 메커니즘이 사용 가능한지, 그리고 사용자가 요소에 마우스를 올려놓을 수 있는지? (Media Queries Level 4에 추가). |
| any-pointer | 어떤 입력 메커니즘이 사용 가능한지, 그리고 그 정확도는 어떻습니까? (Media Queries Level 4에 추가). |
| aspect-ratio | 뷰포트의 너비와 높이 비율 |
| color | 출력장치의 각 색상 구성 요소의 비트 수 |
| color-gamut | 사용자代理와 출력장치가 지원하는 대략적인 색상 범위 (Media Queries Level 4에 추가) |
| color-index | 장치가 표시할 수 있는 색상 수. |
| grid | 장치가 그리드인가요 아니면 비트맵인가요. |
| height | 뷰포트 높이. |
| hover | 주요 입력 메커니즘은 사용자가 요소에 마우스를 올려놓을 수 있도록 허용하나요? (Media Queries Level 4에 추가) |
| inverted-colors | 브라우저나 하위 운영 체제가 색상을 반전하나요? (Media Queries Level 4에 추가). |
| light-level | 현재 환경 빛 수준(Media Queries Level 4에 추가). |
| max-aspect-ratio | 표시 영역의 최대 너비 높이 비율. |
| max-color | 출력 장치의 각 색상 구성 요소의 최대 비트 수. |
| max-color-index | 장치가 표시할 수 있는 최대 색상 수. |
| max-height | 표시 영역의 최대 높이, 예를 들어 브라우저 창. |
| max-monochrome | 단색(회색) 장치에서 각 "색"의 최대 비트 수. |
| max-resolution | 장치의 최대 해상도, dpi 또는 dpcm을 사용. |
| max-width | 표시 영역의 최대 너비, 예를 들어 브라우저 창. |
| min-aspect-ratio | 표시 영역의 최소 너비 높이 비율. |
| min-color | 출력 장치의 각 색상 구성 요소의 최소 비트 수. |
| min-color-index | 장치가 표시할 수 있는 최소 색상 수. |
| min-height | 표시 영역의 최소 높이, 예를 들어 브라우저 창. |
| min-monochrome | 단색(회색) 장치에서 각 "색"의 최소 비트 수. |
| min-resolution | 장치의 최소 해상도, dpi 또는 dpcm을 사용. |
| min-width | 표시 영역의 최소 너비, 예를 들어 브라우저 창. |
| monochrome | 단색(회색) 장치에서 각 "색"의 비트 수. |
| orientation | 뷰포트의 방향(가로 또는 세로 모드). |
| overflow-block | 출력 장치는 범위를 초과하는 내용을 어떻게 처리할까요?(Media Queries Level 4에 추가). |
| overflow-inline | 인라인 축을 따라 범위를 초과하는 내용을 스크롤할 수 있나요?(Media Queries Level 4에 추가). |
| pointer | 주요 입력 메커니즘은 포인터 장치인가요? 그렇다면 정확도는 어떻게 되나요? (Media Queries Level 4에 추가). |
| resolution | 출력 장치의 해상도, dpi 또는 dpcm을 사용. |
| scan | 출력 장치의 스캔 과정. |
| 스크립팅 | 스크립트(예: JavaScript)를 사용할 수 있는지 여부를 결정할 수 있습니까？(Media Queries Level 4에서 추가됨) |
| 업데이트 | 출력 장치가 내용의 외관을 얼마나 빠르게 수정할 수 있는지(Media Queries Level 4에서 추가됨). |
| 너비 | 뷰포트 너비. |
