如何解决使用百分比作为CSS calc的乘数
假设我定义了一个CSS变量--half
等于50%
。
:root {
--half: 50%;
}
然后我可以将某物的width
设置为50%
,如下所示:
.partial {
width: var(--half);
}
到目前为止一切顺利。假设我有一个tall
元素,我想垂直填充视口:
.tall {
height: 100vh;
}
太好了。最后,如果使用tall
,我希望我的50vh
元素仅填充垂直空间的一半(即partial
)。所以我尝试了这个:
.tall.partial {
height: calc(100vh * var(--half));
}
糟糕,这似乎不起作用。如果我将--half
重新定义为等于0.50
,它将起作用:
:root {
--half: 0.50;
}
但是我上面的width
设置不能单独使用变量。
问题A部分:如何在CSS XX%
表达式中使用calc()
名称并将其解释为百分比值作为乘法的一个因素? / p>
问题B部分::如果无法做到这一点,有没有办法我可以按照实际值来定义百分比值,反之亦然,例如以下虚拟定义? (我宁愿不定义重复的“镜像”值,一个百分比,一个小数点。)
:root {
--half-factor: 0.50;
--half: calc(var(half-factor) * 100)%;
}
解决方法
将单位视为变量,您可以像下面这样进行操作:
:root {
--quarter:25;
--half:50;
--threeQuarter:75;
}
* {
--quarter-R:calc(var(--quarter) * var(--u,1%));
--half-R:calc(var(--half) * var(--u,1%));
--threeQuarter-R:calc(var(--threeQuarter) * var(--u,1%));
}
.box {
height:50px;
background:red;
margin:5px;
width:var(--half-R);
}
<div class="box"></div>
<div class="box" style="--u:1vw"></div>
<div class="box" style="--u:1vw;width:var(--threeQuarter-R);"></div>
<div class="box" style="--u:1vw;width:var(--quarter-R);"></div>
<div class="box" style="--u:1vh"></div>
,
如果我被迫定义两个单独的变量(问题的B部分),看来我可以这样做:
:root {
--half-factor: 0.50;
--half: calc(100% * var(half-factor));
}
这样可以使我的应用程序正常工作,并使值最终取决于一个值定义(此处为--half-factor
)。但是,如果有一种方法可以用一个定义提取两个用例,那么我会对了解它感兴趣。 (我知道我可以内联calc(100% * var(half-factor))
而不是使用var(--half)
,但这不是我所说的“单一定义”。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。