내 CSS 변수가 미디어 쿼리에서 작동하지 않는 이유는 무엇입니까?

문제: CSS 변수가 미디어 쿼리에서 작동하지 않습니다

CSS 변수를 미디어 쿼리에 통합하려고 하면 여전히 효과가 없습니다. 다음 코드는 예시 역할을 합니다.

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

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

}

설명:

CSS 사양에 따르면:

"var() 함수는 다음과 같습니다. var() 함수는 요소의 속성 값 일부 대신 사용할 수 없습니다. 속성 값 이외의 모든 것."

즉, 변수는 속성 값에 통합될 수 있지만 미디어 쿼리와는 호환되지 않습니다. 이는 미디어 쿼리가 HTML 요소가 아니므로 일반적으로 변수가 정의되는 루트 요소에서 상속할 수 없기 때문입니다.

대안:

유사한 결과를 얻으려면 기능이 있는 경우 개발자는 CSS 전처리기 활용을 고려할 수 있습니다. 전처리기는 변수 값을 기반으로 동적 미디어 쿼리를 생성하는 데 사용할 수 있는 사용자 정의 코드를 작성하여 CSS를 확장합니다.

위 내용은 내 CSS 변수가 미디어 쿼리에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!