CSS calc() - 带单位值的乘法和除法

Posted

技术标签:

【中文标题】CSS calc() - 带单位值的乘法和除法【英文标题】:CSS calc() - Multiplication and Division with unit-ed values 【发布时间】:2015-06-12 20:35:31 【问题描述】:

是否可以使用 calc() 乘以或除以基于单位的值(如 100%、5px 等)。

例如,我希望做这样的事情:

width: calc(100% * (.7 - 120px / 100%));

希望它可以解决(假设 100% = 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

但是经过一些实验后,我似乎无法将基于单位的值作为除法的分母。

我似乎也无法将两个值组合在一起,例如 5px * 10px5px * 100%

我知道在 100% 的情况下允许这样做是没有意义的,但在我的用例中,我想知道 120px 占总宽度的百分比,然后我将其输入余下的计算。

要么这样,要么如果有人能想出一种不同的方式来写它,那也行。我绞尽脑汁想不出什么来。

【问题讨论】:

【参考方案1】:

在 CSS calc() 除法​​中 - 右侧必须是 <number>,因此不能在这样的除法中使用基于单位的值。

还要注意,在乘法中,至少有一个参数必须是数字。

MDN 对此有很好的文档。

如果您想要更好的计算方法,可以使用预处理器(我喜欢Sass)。该链接会将您带到他们的指南(在该页面上有一个关于操作员的部分)。

【讨论】:

哇...我读了 5 次该页面以寻找该规则。我不知道我是怎么错过它就在操作员的描述旁边的。谢谢。这就是我害怕的。我实际上使用的是 LESS,虽然我上面给你的公式我需要用 calc() 计算,因为我需要知道宽度,它是可变的。回到绘图板上,找到一种完全不同的方法。感谢您的明确回答,至少现在我知道这种方式是死路一条。 预处理器不能像 calc() 那样处理,因为这样的计算需要在渲染时完成,这使得 Sass 之类的东西毫无用处。 该规范说分子和分母都可以是数字,那么这样的东西不应该起作用:calc(100 / 2)? 是的,这行得通。分子也可以是像素等单位。【参考方案2】:

对于像我这样犯错的人,别忘了你不能在 CSS 的 calc 函数中直接使用 Sass 变量。为此,您必须使用Sass的计算方法。

$test: 10px;

.testing
    width: $test * 2;

或者如果需要 calc 实现:

$test: 10px;

.testing
  width: calc(50% + #$test * 2); // results in calc(50% - 20px)

【讨论】:

以上是关于CSS calc() - 带单位值的乘法和除法的主要内容,如果未能解决你的问题,请参考以下文章

css 计算除法

excel表格怎么计算除法

模意义下的除法变乘法

Excel怎么进行乘法和除法

高精度乘法和除法

模2运算的原理 模2加法,模2减法,模2乘法,模2除法