Skip to main content

미디어쿼리 `@media`

미디어 유형

all(기본값): 모든 장치를 대상
print: 인쇄 결과물 및 출력 미리보기 화면에 표시
screen: 화면이 있는 장치를 의미
speech: 음성 합성자치 대상

미디어 특성

width: 스크롤바를 포함한 뷰포트의 너비(min-width, max-width)
height: 뷰포트의 높이(min-height, max-height)
orientation: 뷰포트의 방향(portrait: 세로, landscape: 가로)

@media (orientation: portrait) {
  body {
    background: royalblue;
  }
}

@media (orientation: landscape) {
  body {
    background: skyblue;
  }
}

aspect-ratio: 뷰포트의 가로세로비
resolution: 출력장치의 픽셀 밀도 - 단위 dppx(Device pixel ratio)

caution

portrait 설정과 landscape설정을 하였을 때 공통적인 속성 부여를 하였을 때, 어떤 값이 적용될까?
(portrait 세로)와 (landscape 가로)의 길이 중 더 긴것이 적용된다!

`min-`, `max-`

min-,max-: 최소/최대 조건

/* ~ 최대 1400px까지 스타일 적용 */
@media (max-width: 1400px) {
}

/* 최소 500px부터 ~ 스타일 적용 */
@media (min-width: 500px) {
}

논리연산자

and: 조건을 모두 만족하는 경우
not: 조건을 반전하는 경우(부정)
,: 조건중 하나라도 만족하는 경우
only: 미디어쿼리를 지원 하는 브라우저에서만 작동

@media (min-width: 1000px) and (orientation: landscape) {
}
/* 최소 1000px이상이면 방향이 가로일 떄 적용 */

@media (min-width: 1000px) {
}
/* 최소 1000px이상이면 적용 */

@media not screen and (min-width: 1000px) {
}
/* 1000px 미만으로 적용 */

@media (min-width: 1000px), (orientation: landscape) {
}
/* , 기준으로 하나만 만족하면 적용 */

@media only screen and (max-width: 500px) {
}
/* 미디어 유형을 지정 */

미디어 유형
미디어 특성
min-, max-
논리연산자