我试图在媒体查询中将一个 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 进行计算。但这并没有发生。
最佳答案
在将 --ratio
分配给 --ratio
时,您忘记将 --ratio-alt
包装在 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);
}
}
关于css - 媒体查询中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56427003/