> 웹 프론트엔드 > CSS 튜토리얼 > 내 CSS 변수가 미디어 쿼리에서 작동하지 않는 이유는 무엇입니까?

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

DDD
풀어 주다: 2024-12-07 11:51:13
원래의
184명이 탐색했습니다.

Why Aren't My CSS Variables Working in Media Queries?

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

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

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

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

}
로그인 후 복사

설명:

CSS 사양에 따르면:

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

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

대안:

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿