Question

我在CSS中编写了以下代码。第一行的目的是根据屏幕宽度来计算一行中可以容纳的对象的数量，第二行中使用计算出的数量来计算这些对象的宽度。

:root{
--linkCount: calc(100vw / 200px);
--linkwidth: calc(230px + (100vw - 60px - (var(--linkCount) * (230px + 6px))) / var(--linkCount));
}

问题是第一次计算calc(100vw / 200px);无法正常工作。当我在网站上运行此代码时，根据内容，对象的宽度可能最小（因此基本上是width:auto;）。 calc(5);或5;有效。我已经尝试过删除或增加空格，但是没有运气。

编辑1

这是一个代码段。这两个变量放在:root中 https://jsfiddle.net/josvm9dw/

有人可以向我解释为什么它由于我不明白而无法工作。

Answer 1

您无法将vw除以px，因为它们是不同的度量单位。仅除以绝对数：

--linkCount: calc(100vw / 200);

使用200或您需要的任何数量。

Answer 2

Docs 当涉及到乘法和除法时，您不需要指定单位，因为只是不需要

calc(100vw * 5px)

为什么px特别需要做的是将第一个值乘以5，所以除法也是如此。

但是，您可以同时add和subtract其他单位。

演示

div {
  background: red;
  margin-bottom: 5px;
  height: 50px;
  white-space: nowrap;
  color:white;
}
/* At least one must be a number */
div:nth-child(1) {
  width: calc(100px * 3);
}

div:nth-child(2) {
  width: calc(100vw * 50vh);
}


/* the right side must be a number */
div:nth-child(3) {
  width: calc(300px / 2);
}

div:nth-child(4) {
  width: calc(2 / 200px);
}

/* both can be units */

div:nth-child(5) {
  width: calc(200px + 3em);
}

div:nth-child(6) {
  width: calc(100px + 10vh);
}

div:nth-child(7) {
  width: calc(200px - 20pt);
}

div:nth-child(8) {
  width: calc(100vw - 50vh);
}

<div>calc(100px * 3);</div>
<div>calc(100vw * 50vh); Invalid treated as auto(default)</div>

<div>calc(300px / 2);</div>
<div>calc(2 / 200px); Invalid treated as auto(default)</div>

<div>calc(200px + 3em);</div>
<div>calc(100px + 10vh);</div>
<div>calc(200px - 20pt);</div>
<div>calc(100vw - 50vh);</div>

CSS变量中的计算不起作用

编辑1

2 个答案: