CSS calc 指数除法

Question

我有一个基值 16px ，我需要除以比率 1.067 6 次达到预期结果值 10.84px ，我目前正在通过以下方式执行此操作:

body {
  font-size: calc(16px / 1.067 / 1.067 / 1.067 / 1.067 / 1.067 / 1.067);
}

有没有更有效的方法来编写这个计算，这样我就不必多次重复这个比率？我在想这样的事情:

calc(16px / (1.067 * 6))

但这给了我一个不正确的结果值 2.49px .

任何帮助将不胜感激。

Answer 1

您可以使用 CSS 变量来准备不同的分隔符:

:root {
  --x1:1.067;
  --x2:calc(var(--x1)*var(--x1));
  --x3:calc(var(--x2)*var(--x1));
  --x4:calc(var(--x3)*var(--x1));
  --x5:calc(var(--x4)*var(--x1));
  --x6:calc(var(--x5)*var(--x1));
}

body {
  font-size: calc(16px / var(--x6));
}

some text here

如果您不想要所有这些，您可以进行优化:

:root {
  --x1:1.067;
  --x2:calc(var(--x1)*var(--x1));
  --x3:calc(var(--x2)*var(--x1));
  --x6:calc(var(--x3)*var(--x3));
}

body {
  font-size: calc(16px / var(--x6));
}

some text here