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

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

Rachel Andrew

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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

최소 표시 영역 너비에 대한 일반적인 미디어 쿼리 테스트는 다음과 같이 작성됩니다.

@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.
}

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

@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- 쿼리에는 지정된 값이 포함됩니다(예: 너비가 400px 이상인 경우 min-width: 400px 테스트). 새로운 구문을 사용하면 의미를 더욱 명확하게 표현하고 쿼리 충돌 가능성을 피할 수 있습니다.

아직 구현하지 않은 브라우저를 고려하여 새로운 범위 구문을 사용하려면 PostCSS 플러그인을 사용하여 스타일시트의 새 구문을 이전 구문으로 다시 작성해야 합니다.