时间戳

首页 > 解决方案 > 在 CSS calc() 中使用百分比作为乘数

css - 在 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为 equal ，它确实有效0.50：

:root {
  --half: 0.50;
}

但是我width上面的设置不能单独使用变量。

问题 A 部分：如何XX%在 CSScalc()表达式中使用名称并将其解释为百分比值作为乘法的一个因素？

问题 B 部分：如果无法做到这一点，有没有办法可以根据实际值定义百分比值，反之亦然，例如以下虚构的定义？（我宁愿不定义重复的“镜像”值，一个是百分比值，一个是小数点值。）

:root {
  --half-factor: 0.50;
  --half: calc(var(half-factor) * 100)%;
}

标签： csscss-variablescss-calc

解决方案

将单位视为变量，您可以按如下方式执行：

: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>

推荐阅读