248

メディア クエリで CSS 変数を使用しようとしていますが、機能しません。

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

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

}
4

9 に答える 9

209

スペックから、

このvar()関数は、要素の任意のプロパティの値の任意の部分の代わりに使用できます。このvar()関数は、プロパティ名、セレクター、またはプロパティ値以外には使用できません。(そうすると、通常、無効な構文が生成されるか、意味が変数に関係のない値が生成されます。)

いいえ、メディアクエリでは使用できません。

そして、それは理にかなっています。--mobile-breakpointeg を:root、つまり要素に設定<html>し、そこから他の要素に継承できるためです。しかし、メディア クエリは要素ではなく、 から継承しないため、機能しません<html>。

これは、CSS 変数が達成しようとしていることではありません。代わりに CSS プリプロセッサを使用できます。

于 2016-11-21T15:07:07.070 に答える
24

そのようなネイティブ CSS 変数を使用することは明らかに不可能です。制限の 1 つです。

それを使用する賢い方法は、メディアクエリの変数を変更して、すべてのスタイルに影響を与えることです。この記事をお勧めします。

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}
于 2016-11-21T14:57:43.517 に答える
13

目的を達成する 1 つの方法は、 npm package を使用することですpostcss-media-variables。

npm パッケージの使用に問題がない場合は、ここで同じドキュメントを参照できます。

例

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}
于 2016-11-21T15:09:43.260 に答える
2

他の回答を読むことができるので、まだそうすることができません。

env()誰かがカスタム環境変数 (の代わりにカスタム css 変数に似ているvar()) について言及しており、原則は適切ですが、まだ 2 つの主要な問題があります。

  • ブラウザのサポートが弱い
  • これまでのところ、それらを定義する方法はありません (ただし、これはこれまでのところ非公式のドラフトにすぎないため、将来的にはそうなるでしょう)
于 2018-12-15T14:19:38.857 に答える