媒体查询中的变量

Question

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

我试过更改媒体查询的顺序，但没有成功。

: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: --ratio-alt;
    }
}

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

Answer 1

您在将 --ratio-alt 分配给 --ratio 时忘记将其包装在 var() 中，在您的 @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);
  }
}

媒体查询中的变量

Variables in media query

css

css-variables