CSS 変数がメディア クエリで機能しないのはなぜですか?

問題: CSS 変数がメディア クエリで機能しない

CSS 変数をメディア クエリに組み込もうとすると、無効なままになります。次のコードは例として機能します:

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

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

}

説明:

CSS 仕様に従って:

「var() 関数は次のことができます」 var() 関数は、要素のプロパティの値の一部の代わりに使用できません。プロパティ名、セレクター、またはプロパティとして使用することはできません。プロパティ値以外のもの。"

言い換えると、変数をプロパティ値に組み込むことはできますが、メディア クエリとの互換性はありません。これは、メディア クエリが HTML 要素ではないため、変数が通常定義されるルート要素から継承できないことが原因です。

代替案:

同様のことを実現するには機能を利用するには、開発者は CSS プリプロセッサの利用を検討できます。プリプロセッサは、変数値に基づいて動的なメディア クエリを作成するために使用できるカスタム コードを記述できるようにすることで CSS を拡張します。

以上がCSS 変数がメディア クエリで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。