@mediaCSS@규칙은 스타일 시트의 일부를 하나 이상의미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다.@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

구문

@media @규칙은 최상위 코드나, 아무조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.

/* 최상위 코드 레벨 */@media screen and (min-width: 900px) {  article {    padding: 1rem 3rem;  }}/* 다른 조건부 @규칙 내에 중첩 */@supports (display: flex) {  @media screen and (min-width: 900px) {    article {      display: flex;    }  }}

미디어 쿼리 구문에 관한 내용은미디어 쿼리 사용하기 문서를 참고하세요.

접근성 고려사항

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의<length> 자리에는em을 사용하는게 좋습니다.

em과px 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면em이 더 자연스럽게 동작합니다.

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대prefers-reduced-motion 쿼리를 사용하면사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다.

보안

미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.

그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.

형식 구문

@media =
  @media<media-query-list> {<rule-list> }

예제

출력과 화면 미디어 타입 판별

@media print {  body {    font-size: 10pt;  }}@media screen {  body {    font-size: 13px;  }}@media screen, print {  body {    line-height: 1.2;  }}@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {  body {    line-height: 1.4;  }}

Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.

@media (height > 600px) {  body {    line-height: 1.4;  }}@media (400px <= width <= 700px) {  body {    line-height: 1.4;  }}

더 많은 예제는미디어 쿼리 사용하기를 참고하세요.

명세

브라우저 호환성

같이 보기

• 미디어 쿼리 사용하기
• JavaScript에서@media에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스CSSMediaRule
• Mozilla 미디어 특성 확장
• WebKit 미디어 특성 확장