媒体查询中的变量

Question

我正在尝试在媒体查询中将一个css变量设置为另一个css变量。但是我没有看到我会想到的变化。如果我查看Chrome开发者工具，它使用的是--ratio-alt变量。但是屏幕上显示的结果看起来更多是它只是以100％显示字体。

我尝试更改媒体查询的顺序，但是没有运气。

^ *[0-9]+(?: [0-9]+)* *$
^\s*\d+(?:\s\d+)*\s*$

我希望所有字体大小都可以计算40em以上宽度的ratio-alt。但这没有发生。

Answer 1

在--ratio-alt查询中将var()分配给--ratio时，您忘记将@media包裹在:root { --font-size: 100%; --ratio: 1.333; --ratio-alt: 1.68; --h4: calc(var(--font-size) * var(--ratio)); --h3: calc(var(--h4) * var(--ratio)); --h2: calc(var(--h3) * var(--ratio)); --h1: calc(var(--h2) * var(--ratio)); } @media (min-width: 40em) { :root { --ratio: var(--ratio-alt); } } 中：

focusedInput