将方程转换为 CSS calc 会导致“无效的属性值”答案

【问题标题】：Translating equation into CSS calc causes "invalid property value"将方程转换为 CSS calc 会导致“无效的属性值”
【发布时间】：2017-05-28 18:19:18
【问题描述】：

我正在尝试将方程 .00009441x^2 - .083x + 400（其中 x 为 100vw）转换为 CSS calc() 属性。这是我目前所拥有的：

div {
    height:calc(((100vw * .00009441) * (100vw * .00009441)) - (.083*100vw) + 400);
}

但是 Chrome 一直抛出一个无效的属性值错误。我应该如何解决这个问题？

预计的近似高度为（宽度 x 高度，单位为 px）：

1184 by 435
1081 by 420
891 by 400
747 by 391
1326 by 455

【问题讨论】：

【解决方案1】：

我只是玩弄括号的位置和顺序等，直到它起作用。我认为这实现了您想要做的事情？希望……

div {
      height: calc( ((100vw * .00009441)^2 - (.083*100vw) + 400));
      background: #000;
      width: 100px;
}

&lt;div&gt;Hello world&lt;/div&gt;

【讨论】：

这里的文字在愚弄你:( ....但仍然不确定这里的高度值是什么
我不确定所需的高度应该是多少，但我的代码 sn-p 在 chrome 开发工具中没有出错，它正确使用了 height 属性。希望 pokemonblack 能够按照他们的需要工作。
添加了预期值。感谢马修的帮助，但我不确定是不是这样。 @GCyrillus
我认为下面保罗的回答是正确的吗？ ^ 符号是 CSS 中的一个属性选择器，因此它在您尝试使用它的上下文中不起作用。
@EmilyChewy 如果只是 ^，那么手动平方值将解决问题，但是 calc(((100vw * .00009441) * (100vw * .00009441)) - (.083* 100vw) + 400) 似乎不起作用...

【解决方案2】：

您只能深入一组括号 - 您不能进行嵌套计算，因为 CSS 中的其他数学符号代表其他选择器标准（+ 是相邻的兄弟组合符，^ 是属性选择器等）

【讨论】：

这是朝着正确方向迈出的一步，但问题仍然存在：height:calc(((100vw * .00009441) * (100vw * .00009441)) - (.083*100vw) + 400 );
实际上，您只能深入一组括号 - 您不能进行嵌套计算，因为 CSS 中的 +、、- 符号代表其他选择器标准（ 就是一切), (+ 是相邻的兄弟组合) 等等我已经修改了我的答案以整合这两个原因。