@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

참고 : JavaScript에서는 @mediaCSSMediaRule CSS 객체 모델 인터페이스로 접근할 수 있습니다.

구문

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

css
/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

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

접근성 고려사항

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

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

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

보안

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

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

형식 구문

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

예제

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

css
@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부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.

css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

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

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

명세

Specification
Media Queries Level 4
# media-descriptor-table
CSS Conditional Rules Module Level 3
# at-media

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@media
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
-webkit-animation media feature
DeprecatedNon-standard
-webkit-device-pixel-ratio media feature
-webkit-max-device-pixel-ratio media feature
-webkit-min-device-pixel-ratio media feature
-webkit-transform-2d media feature
Non-standard
-webkit-transform-3d media feature
-webkit-transition media feature
DeprecatedNon-standard
any-hover media feature
any-pointer media feature
aspect-ratio media feature
calc() expressions
color media feature
color-gamut media feature
color-index media feature
device-aspect-ratio media feature
Deprecated
device-height media feature
Deprecated
device-posture media feature
Experimental
device-width media feature
Deprecated
display-mode media feature
picture-in-picture value
Experimental
dynamic-range media feature
forced-colors media feature
grid media feature
height media feature
hover media feature
inverted-colors media feature
Media feature expressions
Media query value support
monochrome media feature
Nested media queries
or syntax from Media Queries Level 4
orientation media feature
overflow-block media feature
overflow-inline media feature
pointer media feature
prefers-color-scheme media feature
no-preference value
DeprecatedNon-standard
Respects color-scheme inherited from parent
Non-standard
prefers-contrast media feature
prefers-reduced-data media feature
Experimental
prefers-reduced-motion media feature
prefers-reduced-transparency media feature
Experimental
Range syntax from Media Queries Level 4
resolution media feature
scripting media feature
update media feature
video-dynamic-range media feature
width media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

같이 보기