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

Question

有人可以向我解释 calc(.333 * (100vw - 12em)) 在以下 HTML 行中的含义吗？特别是 .333 值；这是从哪里来的？

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

取自http://ericportis.com/posts/2014/srcset-sizes/

A length can be all sorts of things! A length can be absolute (e.g. 99px, 16em) or relative (33.3vw, as in our example). You’ll note that, unlike our example, there are lots of layouts which combine both absolute and relative units. That’s where the surprisingly well-supported calc() function comes in. Let’s say we added a 12em sidebar to our 3-column layout. We’d adjust our sizes attribute like so:

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

我明白了:

• (min-width: 36em) = 媒体查询
• calc(.333 * (100vw - 12em)) = 渲染图像大小
• 100vw = 默认渲染图像长度

Answer 1

让我们剖析这个表达式:

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

calc 表示作为表达式求值。

vw 是 View 宽度的 1%，因此 100vw 是 View 宽度的 100%。

em 是大写字母 m (M) 的宽度，所以 12 就是 12 em 的宽度，或者宽度:MMMMMMMMMMMM

100vw - 12em 因此是宽度减去十二个 M。如果这篇文章有 View 的宽度，那将是这样的:

      / from here                                                         to here \

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

.333 大约是 1/3，所以这将是上面宽度的三分之一。所以，这个宽度看起来像:

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

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