CSS 미디어 쿼리 생성기

미디어 쿼리의 구조

미디어 쿼리는 선택적인 미디어 유형 뒤에 괄호로 묶은 미디어 기능을 and로 이은 것입니다. 너비, 높이, 방향은 Media Queries Level 3에 정의되어 있습니다. Level 4는 범위 비교 문법을 더하고 hover, pointer, any-hover를 정의하며, 사용자 설정 기능인 prefers-color-scheme, prefers-reduced-motion, prefers-contrast는 Level 5에 정의되어 있습니다. and로 이은 조건이 모두 참이어야 블록이 적용됩니다.

이 생성기는 미디어 유형, min-width, max-width, 방향, 색상 모드, 동작 줄이기, 대비, 호버, 포인터 순서로 조건을 고정해 출력합니다. 유형이 all이고 선택한 조건이 하나도 없으면 규칙을 만들지 않습니다. @media all은 모든 기기에 일치하기 때문입니다.

@media screen and (min-width: 768px) and (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  /* Add responsive styles here */
}

min-width와 max-width는 경계값을 포함합니다

(min-width: 768px)는 정확히 768px인 뷰포트와 그보다 넓은 모든 뷰포트에 일치하고, (max-width: 767px)는 한 픽셀 앞에서 끝납니다. 그래서 max-width: 768px와 min-width: 768px를 각각 쓰면 768px에서 둘 다 일치하고, 충돌하는 속성은 파일에서 나중에 온 규칙이 이깁니다. 가상 뷰포트도 같은 경계 포함 비교를 씁니다.

너비 기능은 보이는 스크롤바를 포함한 뷰포트를 재며, 페이지를 확대하면 값이 달라집니다. 이 도구는 599.98처럼 소수 둘째 자리까지 허용하는데, 고해상도 화면에서 뷰포트 너비가 소수가 될 때 범위가 겹치지 않게 하려는 용도입니다.

px 브레이크포인트와 em 브레이크포인트

미디어 쿼리 안의 em은 페이지나 요소의 글꼴 크기가 아니라 언제나 브라우저의 초기 글꼴 크기, 보통 16px을 뜻합니다. 그래서 48em은 기본 상태에서 768px이고, 사용자가 브라우저 설정에서 기본 글꼴을 키우면 함께 커지는 반면 768px은 고정됩니다. 미리보기는 em을 16px로 환산합니다.

사용자 설정 쿼리는 화면이 아니라 방문자를 설명합니다

prefers-color-scheme, prefers-reduced-motion, prefers-contrast: more 또는 less는 방문자가 운영체제나 브라우저에서 정한 설정을 읽습니다. hover: none과 pointer: coarse는 주 입력 장치가 마우스가 아니라 손가락이라는 뜻입니다. 이런 조건은 너비처럼 끌어서 바꿀 수 없어서 미리보기에 시뮬레이션 스위치를 둡니다.