メディアクエリで CSS 変数を使用しようとしていますが、機能しません。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
ベストアンサー1
からスペック、
この
var()関数は、要素の任意のプロパティの値の任意の部分の代わりとして使用できます。このvar()関数は、プロパティ名、セレクター、またはプロパティ値以外のものとして使用することはできません。(通常、これを行うと、無効な構文が生成されるか、変数と意味が関連しない値が生成されます。)
したがって、メディアクエリでは使用できません。
それは理にかなっています。なぜなら、たとえば を 、つまり要素--mobile-breakpointに設定し、そこから他の要素に継承することができるからです。しかし、メディア クエリは要素ではなく、 から継承しないため、機能しません。:root<html><html>
これは CSS 変数が実現しようとしていることではありません。代わりに CSS プリプロセッサを使用できます。