CSS 미디어쿼리

양식

@media (조건) {
스타일
}

너비 800px 이하일 때 적용 방법

@media (max-width: 800px) {
 스타일
}

너비 800px 이상일 때 적용 방법

@media (min-width: 800px) {
스타일
}

JS matchMedia

양식

window.matchMedia( 미디어쿼리 입력 )

window. 생략 가능

matchMedia( 미디어쿼리 입력 ).media
=> 미디어쿼리 문자열 반환
matchMedia( 미디어쿼리 입력 ).matches
=> true or false 반환
[

예시

if (matchMedia("min-width: 1024px").matches) {
  // 1024px 이상
} else {
  // 1024px 미만
}