CSS 변수를 미디어 쿼리에 직접 사용할 수 있나요?

미디어 쿼리 및 CSS 변수 호환성

CSS 영역에서 미디어 쿼리에 기본 변수를 사용하면 이에 대한 몇 가지 질문이 제기되었습니다. 기능. 이 문서에서는 구체적인 예와 이에 대한 후속 설명을 탐색하여 이 문제를 조명하는 것을 목표로 합니다.

쿼리 구현 및 결과

다음 코드 조각을 고려하세요.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {
  
}

이 경우 미디어 쿼리는 CSS 변수 --mobile-breakpoint를 활용하여 반응형 응답에 대한 특정 중단점을 정의하려고 시도합니다. 설계. 그러나 실제로는 이 구성으로 원하는 결과를 얻을 수 없습니다.

설명

CSS 사양에 따르면 "var() 함수를 제자리에서 사용할 수 있습니다. 요소의 모든 속성에 있는 값의 일부입니다." 그러나 이 사용법은 속성 이름, 선택기 또는 기타 속성이 아닌 값 컨텍스트로 확장되지 않습니다.

미디어 쿼리의 경우 요소로 간주되지 않으며 html과 같은 요소에서 속성을 상속하지도 않습니다. 결과적으로 미디어 쿼리는 의도한 대로 --mobile-breakpoint 변수에 액세스할 수 없습니다.

대체 솔루션

미디어 쿼리에서 CSS 변수 사용의 한계를 고려하여 대체 솔루션은 유사한 기능을 달성하기 위해 존재합니다. 한 가지 접근 방식은 나중에 미디어 쿼리에 통합될 수 있는 변수를 정의하는 메커니즘을 제공하는 Sass 또는 Less와 같은 CSS 전처리기를 활용하는 것입니다.

위 내용은 CSS 변수를 미디어 쿼리에 직접 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!