이 새로운 문법으로 미디어 쿼리를 간소화하는 방법을 알아보세요.
미디어 쿼리를 통해 반응형 디자인이 가능해졌으며, 표시 영역의 최소 및 최대 크기를 테스트할 수 있는 범위 기능은 미디어 쿼리를 사용하는 사이트의 약 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 플러그인을 사용하세요.