CSS ネイティブ変数はメディア クエリで使用できますか?

メディア クエリでの CSS ネイティブ変数の使用

CSS ネイティブ変数は、 CSS。ただし、メディア クエリでこれらの変数を使用するには制限があります。

この問題は、メディア クエリ内で CSS 変数を使用しようとすると発生します。たとえば、次のコードについて考えてみましょう。

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

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

}

このコードは、ビューポートの幅が --mobile-breakpoint 変数に格納されている値以下の場合にスタイルを適用するメディア クエリを定義することを目的としています。ただし、CSS 変数はメディア クエリでは使用できないため、このアプローチは機能しません。

CSS 仕様では、CSS 変数へのアクセスに使用される var() 関数はプロパティ値でのみ使用できると明示的に規定されています。プロパティ名、セレクター、またはメディア クエリでは使用できません。この制限は、CSS ドキュメントの構造や機能を変更するのではなく、スタイル値を制御するという本来の目的に CSS 変数が使用されるようにするために課されています。

この問題に対処するには、次のような CSS プリプロセッサを使用できます。サス以下。これらのプリプロセッサは、コードを有効な CSS に変換することで、メディア クエリで変数を使用できるようにします。プリプロセッサを使用すると、前のコードは次のように書き換えることができます。

$mobile-breakpoint: 642px;

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

}

プリプロセッサを使用すると、メディア クエリ内で $mobile-breakpoint 変数を使用できるようになり、定義されたパラメータに基づいて目的のスタイルの動作が可能になります。変数。

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