미디어 범위 지정 쿼리의 새로운 구문

이 새로운 문법을 사용하여 미디어 쿼리를 간소화하는 방법을 알아보세요.

Rachel Andrew

미디어 쿼리를 통해 반응형 디자인이 가능해졌으며, 표시 영역의 최소 및 최대 크기를 테스트할 수 있는 범위 기능은 미디어 쿼리를 사용하는 사이트의 약 80%에서 사용됩니다. 미디어 쿼리 수준 4 사양에는 이러한 범위 쿼리의 향상된 구문이 포함되어 있습니다.

Browser Support

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

다음 예는 쿼리를 간소화하는 방법을 보여줍니다.

최소 뷰포트 너비를 테스트하는 일반적인 미디어 쿼리는 다음과 같이 작성됩니다.

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

새 문법을 사용하면 비교 연산자를 사용할 수 있습니다.

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

최대 너비 테스트:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

그리고 수준 4 문법을 사용하는 버전은 다음과 같습니다.

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

이 문법은 특히 두 너비 간에 테스트할 때 쿼리를 간소화할 수 있습니다. 다음 예에서 미디어 쿼리는 최소 너비가 400픽셀, 최대 너비가 600픽셀인 표시 영역을 테스트합니다.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

이를 새 문법으로 다시 작성하면 다음과 같습니다.

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

테스트 중인 기능(이 경우 width)은 두 값 사이에 있습니다.

새로운 문법은 미디어 쿼리의 표현을 줄이는 것 외에도 정확성이라는 이점이 있습니다. min- 및 max- 쿼리는 지정된 값을 포함합니다. 예를 들어 min-width: 400px는 너비가 400px 이상인지 테스트합니다. 새로운 문법을 사용하면 의도를 더 명시적으로 표현하고 쿼리 충돌 가능성을 방지할 수 있습니다.

아직 구현하지 않은 브라우저를 고려하면서 새 범위 문법을 사용하려면 스타일시트에서 새 문법을 이전 문법으로 재작성하는 PostCSS 플러그인을 사용하세요.