CSS 미디어 질의: 빠른 참조 및 설명서

Media queries는 사용 중인 장치 유형, 뷰포트 크기, 화면 픽셀 밀도, 심지어 장치 방향 등 요소에 따라 스타일을 조정할 수 있는 강력한 방법을 제공합니다.미디어 조회가 이미 오랫동안 존재했기 때문에, 당신은 이미 기본 문법과 용법을 익혔을 것입니다.따라서 이 글은 좋은 빠른 참고점이 되기 위해 가능한 기교를 발견할 수 있기를 바랍니다.

기본 미디어 조회

미디어 조회 사용@mediaat 규칙은 미디어 유형, 0개 또는 여러 개의 미디어 기능 또는 미디어 유형과 미디어 기능을 정의합니다.사용할 수 있는 미디어 형식은all,print,screen,speech입니다. 지정하지 않으면all의 형식을 나타냅니다.여러 미디어 유형을 동시에 사용할 수 있으며 쉼표로 구분해야 합니다.

@media screen, print {
  /* Styles for screen and print devices */
}

미디어 조회 레벨 4는 텔레비전이나 투영 등 미디어 유형을 추천하지 않습니다.
미디어 특성에 대해서는 괄호에 정의되어 대량의 특성을 테스트할 수 있다.일부 가장 유행하는 특성은 너비, 높이, 종횡비, 방향과 해상도를 포함한다.이러한 유행 기능 중 대부분은 범위 기능이기 때문에 최소와 최대 버전도 있다. (예를 들어 최소폭, 최대폭, 최소종횡비, 최대종횡비...)
다음 간단한 예시에서 기본 배경색은 hotpink이지만 650px보다 작은 화면 장치의 배경색은 rebeccapurple로 바뀝니다.

body {
  background: hotpink;
}

@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

미디어 형식과 미디어 기능을 지정할 때 and 논리 연산자를 사용해야 합니다.
다음은 미디어 유형, 미디어 기능 또는 둘 다를 모두 지정하는 간단한 미디어 질의의 몇 가지 예입니다.

@media print {
  /* styles for print media only */
}

@media (max-width: 65rem) {
  /* styles for any device that has a display width of 65rem or less */
}

@media screen and (min-width: 800px) {
  /* styles for screen viewports that have a width of 800px or more */
}

다양한 미디어 기능

기능 간의 and 논리 연산자를 사용하여 미디어 조회를 충족시키기 위해 여러 개의 미디어 기능 요구를 지정할 수 있습니다.and를 사용할 때, 모든 기능의 계산 결과가true일 때만 조회가 일치합니다.예를 들어, 배치는 일반적으로 여러 뷰포트 너비 범위로 조정됩니다.

/* Extra-small */
@media screen and (max-width: 360px) {
  /* ... */
}

/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
  /* ... */
}

/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
  /* ... */
}

/* ... */

쉼표를 사용한 Or 논리 연산자

쉼표로 구분된 여러 개의 조회를 정의할 수 있습니다. 이 경우 쉼표는 논리 or 연산자로 충당하고 조회는 조회 목록이 됩니다.쉼표로 구분된 질의가 일치하면 미디어 질의가 적용됩니다.
다음 예제에서 장치의 방향이 세로 방향이거나 장치의 뷰포트의 최소 너비가 3rem, 최대 세로 비율이 2/1이면 미디어 조회가 진짜가 됩니다.

@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

비논리적 연산자

검색의 시작 부분에서 not 논리 연산자를 사용하여 전체 검색의 진실성을 전환할 수 있습니다.브라우저나 장치가 일부 조건을 충족시키지 못할 때, not 조작자는 스타일을 적용하는 데 사용할 수 있습니다.다음 예제에서는 주요 좌표 입력 장치가 요소에 멈출 수 없을 때 미디어 질의가 적용됩니다.

@media not screen and (hover: hover) {
  /* ... */
}

not를 사용할 때 미디어 형식은 선택할 수 없습니다.그 밖에 not는 전체 검색 목록 (쉼표로 구분된 검색) 을 부정하지 않고 하나의 검색만 부정합니다.

논리 연산자만

유일한 논리 연산자는 오래된 브라우저의 전체 조회를 숨긴다.즉, 오래된 브라우저는 유일한 키워드를 이해할 수 없기 때문에 전체 미디어 조회는 무시된다.그렇지 않으면 유효하지 않습니다.

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

not 연산자와 마찬가지로 사용할 때만 미디어 형식은 선택할 수 없습니다.3급 미디어 조회를 지원하지 않는 전통적인 브라우저는 현재 매우 드물기 때문에 대부분의 경우 3급 미디어 조회만 지원하는 것은 필요하지 않다는 것을 주의하십시오.

미디어 쿼리 레벨 4 신규 내용

최신 미디어 쿼리 사양 (4 레벨) 은 테스트할 수 있는 많은 새로운 미디어 기능을 지정합니다.

포인터: 주 정점 장치가 있는 경우(없음, 굵기 또는 가늘기).

임의의 포인터: 사용 가능한 포인터 장치가 있으면 (없음, 대충 또는 세밀함)

서스펜션: 기본 좌표 장치가 엔티티에 서스펜션할 수 있는지 여부(무 또는 서스펜션).

임의의 정지: 사용 가능한 정점 설비는 원소에 정지할 수 있다(무 또는 정지).

색역: 사용 가능한 색의 범위(srgb, p3 또는rec2020).

넘침 내연: 내연축의 잠재적인 넘침을 어떻게 처리합니까 (무, 페이지, 선택 페이지 또는 스크롤).

넘침 블록: 블록 축의 잠재적 넘침을 처리하는 방법 (무, 페이지, 옵션 페이지 또는 스크롤).

업데이트: 레이아웃이 업데이트될 수 있는 빈도(없음, 느림 또는 빠름).

망막 모니터의 미디어 조회

지난 몇 년 동안, 우리는 더욱 높은 픽셀 밀도 모니터를 갖춘 설비가 급증하는 것을 보기 시작했다.픽셀 밀도가 높은 장치는 디자인의 일부분에 대해 서로 다른 스타일을 설정할 수 있다.좋은 예는 어떤 도형의 고해상도 버전을 제공하는 것이다.
우리는 이 점을 실현하기 위해 최소 해상도 미디어 기능 (192dpi) 을 사용할 수 있다.그러나 모든 브라우저가 해상도 기능을 지원하는 것은 아닙니다. 더 간단하기 위해서 비표준-webkit 최소 장치의 픽셀 비례 기능을 추가할 수 있습니다. 그 값은 2입니다.

@media screen and
  (min-resolution: 192dpi),
  (-webkit-min-device-pixel-ratio: 2) {
    /* ... */
}

해상도 미디어 기능on Can I Use에 대한 현재 브라우저의 지원을 추적할 수 있습니다.

리소스

다음은 매우 유용한 미디어 조회 관련 자원입니다.

CSS 기술Media Queries for Standard Devices.

MQTest.io, 장치 응답의 미디어 기능을 테스트합니다.

MDNreference of available media features.