CSS 変数はメディア クエリで直接使用できますか?

メディア クエリと CSS 変数の互換性

CSS の領域では、メディア クエリでのネイティブ変数の使用により、そのクエリに関するいくつかの疑問が生じています。機能性。この記事は、具体的な例とその後の説明を検討することで、この問題を明らかにすることを目的としています。

クエリの実装と結果

次のコード スニペットを考えてみましょう:

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

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

この例では、メディア クエリは CSS 変数 --mobile-breakpoint を利用して、特定のブレークポイントを定義しようとします。レスポンシブデザイン。ただし、実際には、この設定では望ましい結果が得られません。

説明

CSS 仕様によれば、「var() 関数は代わりに使用できます」要素の任意のプロパティの値の任意の部分。」ただし、この使用法は、プロパティ名、セレクター、またはその他の非プロパティ値コンテキストには拡張されません。

メディア クエリの場合、それらは要素とみなされず、html などの要素からプロパティを継承しません。その結果、メディア クエリは意図したように --mobile-breakpoint 変数にアクセスできません。

代替ソリューション

メディア クエリでの CSS 変数の使用の制限を考慮した代替ソリューション同様の機能を実現するために存在します。 1 つのアプローチには、Sass や Less などの CSS プリプロセッサを利用することが含まれます。これは、後でメディア クエリに組み込むことができる変数を定義するメカニズムを提供します。

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