修改媒体查询中的CSS变量
修改媒体查询中的CSS变量
提问于 2022-11-27 16:27:21
是否有一种方法可以用普通的CSS修改媒体查询中先前声明的变量？我想要的是这样的(当然，这些变量最终都会被计算出来)：
#container {
--elem-size: 20px;
}
@media only screen and (min-width: 800px) {
#container {
--elem-size: calc(var(--elem-size) * 2);
}
}我知道，可以声明一个“基本变量”(例如-基-elem-大小)，然后使用它为不同的视图生成新的变量值。然而，我正在处理大量的CSS变量，这使得从它们中创建一个重复的基是不可取的。理想的解决方案将能够“修改”以前声明的值。
回答 2
Stack Overflow用户
发布于 2022-11-27 18:07:44
这可能远不是理想的，但在某种程度上确实定义了风格的一行。它使用CSS变量的回退值。
打开全屏并更改窗口大小以查看结果：
:root {
--elem-size-base: 50px;
}
#container {
/* Fallback for base value, optional 2nd fallback for no variable value */
width: var(--elem-size, var(--elem-size-base, 50px));
height: var(--elem-size, var(--elem-size-base, 50px));
outline: 2px solid #000;
background-color: pink;
}
@media only screen and (min-width: 768px) {
#container {
/* This variable for various @media */
--elem-size: calc(var(--elem-size-base) * 2);
background-color: lightblue;
}
}
@media only screen and (min-width: 1024px) {
#container {
/* This variable for various @media */
--elem-size: calc(var(--elem-size-base) * 4);
background-color: lightgreen;
}
}<div id="container"></div>
Stack Overflow用户
发布于 2022-11-27 18:39:10
我认为，使用基本CSS变量将使CSS更加可读性更强，更易于维护，特别是在使用大型代码库的情况下。
可能是这样的：
:root {
/* Define you base variables */
--font-size-default: 16px;
--font-size--large: calc(var(--font-size-default) * 1.25);
/* Assign the base variable to the element variables */
--elem-size: var(--font-size-default);
}
@media screen and (min-width: 840px) {
:root {
/* Change base variable used for element variable */
--elem-size: var(--font-size--large);
}
}
这允许您设置一个基本字体大小变量和该变量的一个(或多个)“变体”，然后可以在整个项目中使用该变量。
我建议您研究一下类似于开式道具的东西(对于基本变量可以是什么以及如何使用它们有一些非常好的想法)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74591767
复制相关文章
相似问题
腾讯云开发者
