html - calc(.333 *(100vw-12em))是什么意思？

有人能给我解释一下calc(.333 * (100vw - 12em))在下面的HTML行中是什么意思吗？尤其是.333的价值，这是从哪里来的？

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

取自http://ericportis.com/posts/2014/srcset-sizes/
长度可以是各种各样的东西！长度可以是绝对的（例如。
99px，16em）或相对（33.3vw，如我们的例子所示）。你会注意到，
与我们的示例不同，有许多布局将两者结合在一起
绝对和相对单位。令人惊讶的是
支持良好的calc（）函数。假设我们加了12个
边栏到我们的3列布局。我们会调整大小属性
所以：

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
       100vw"

我非常理解：
（最小宽度：36em）=媒体查询
calc（.333*（100vw-12em））=渲染图像大小
100vw=默认渲染图像长度

最佳答案

让我们剖析这个表达式：

calc(.333 * (100vw - 12em))

calc表示作为表达式求值。
vw是视图宽度的1%，因此100vw是视图宽度的100%。
em是大写字母m的宽度（M），因此12的宽度为12 ems，或：MMMMMMMMMMMM
100vw - 12em因此是宽度减去十二米。如果这根柱子有一个视图的宽度，那么它将类似于：

      / from here                                                         to here \

MMMMMM------------------------------------------------------------------------------MMMMMM
.333的宽度约为1/3，因此这是上面宽度的三分之一。所以，这个宽度看起来像：

      / from here      to here \                          / or from here  to here \

MMMMMM------------------------------------------------------------------------------MMMMMM