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

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

Rachel Andrew

미디어 쿼리를 통해 반응형 디자인이 가능해졌으며, 표시 영역의 최소 및 최대 크기를 테스트할 수 있는 범위 기능은 미디어 쿼리를 사용하는 사이트의 약 80%에서 사용됩니다. 미디어 쿼리 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 플러그인을 사용하세요.