BinaryDevelop
  1. ホーム
  2. css

[解決済み】メディアクエリでCSSネイティブ変数が機能しない件

2022-04-02 15:28:25

質問

メディアクエリでCSS変数を使おうとしていますが、うまくいきません。 

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

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

}

解決方法は？

からの スペック ,

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

だから、メディアクエリで使うのはダメなんだ。

そしてそれは理にかなっている。なぜなら --mobile-breakpoint には、例えば :root であること、つまり <html> 要素に継承され、そこから他の要素に継承されます。しかし、メディアクエリは要素ではありません。 <html> だから、うまくいかないんだ。

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します