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

Question

谁能给我解释一下 HTML 后面一行中的 calc(.333 * (100vw - 12em)) 是什么意思？特别是 .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

好吧，这意味着几乎正好是（视口宽度的百分之一百减去 12em）的三分之一（0.33...）。

Let’s say we added a 12em sidebar to our 3-column layout. We’d adjust our sizes attribute like so...

所以，显然他有一个三列布局（因此是 0.33...三分之一）并且他想为 12em 宽的列创建 space。所以他从 calc()

希望你现在明白了。

Answer 2

让我们来剖析这个表达式：

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

calc 表示作为表达式求值。

vw 是视图宽度的 1%，所以 100vw 是视图宽度的 100%。

em 是大写字母 m (M) 的宽度，因此其中 12 将是 12 em 的宽度，或宽度：MMMMMMMMMMMM

100vw - 12em 因此是宽度减去十二个 M。如果这个 post 有一个视图的宽度，那么它会是这样的：

      / from here                                                         to here \

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

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

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

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

Answer 3

我喜欢用 JS 测试 CSS 维度，你可以彻底弄清楚值和单位之间的关系。

var samp = document.getElementById('samp');
var myForm = document.getElementById('myForm');
var output = document.getElementById('output');

myForm.addEventListener('input', function(event){
    var t = event.target;
    t.nextElementSibling.innerHTML = t.value + t.getAttribute('data-unit');
    setWidth();
});

window.onload = function(){
 setWidth();
};

function setWidth(){
    var el = myForm.elements;
 var sheet = document.styleSheets[0];
 var lnh = sheet.cssRules.length;
    var sel = "width: calc(" + el[1].value + " * (" + el[2].value + "vw - " + el[3].value + "em))";
    
 sheet.insertRule("#samp {"+sel+"}", lnh);
    output.innerHTML = sel;
}

input[type='range'] {
  width: 60%;
}

p {
  margin:0;
  font-family:monospace;
}

#samp {
  background-color:#33aaff;
  height:40px;
  margin-top:10px;
}

<form action="" id="myForm">
  <fieldset>
    <label>
      <input type="range" value=".333" min=".1" max="1" step=".001" data-unit="">
      <span>.333</span>
    </label>
    <label>
      <input type="range" value="100" min="1" max="100" step="1" data-unit="vw">
      <span>100vw</span>
    </label>
    <label>
      <input type="range" value="12" min="0" max="50" step=".2" data-unit="em">
      <span>12em</span>
    </label>
  </fieldset>
  <fieldset>
    <p id="output"></p>
  </fieldset>
</form>


<div id="samp"></div>

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

What does calc(.333 * (100vw - 12em)) mean?

html

responsive-design

srcset

responsive-images