3

有人可以向我解释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() 函数的用武之地。假设我们在 3 列布局中添加了一个 12em 侧边栏。我们会像这样调整我们的尺寸属性：

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

我明白这一点：

  • （最小宽度：36em）=媒体查询
  • calc(.333 * (100vw - 12em)) = 渲染图像大小
  • 100vw = 默认渲染图像长度
4

3 回答 3

7

让我们剖析一下这个表达式：

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

calc表示评估为表达式。

vw是1%视图宽度，视图宽度100vw也是100%。

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

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

      / from here                                                         to here \

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

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

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

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

于 2016-01-25T22:47:23.733 回答
1

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

假设我们在 3 列布局中添加了一个 12em 侧边栏。我们会像这样调整我们的尺寸属性......

所以，显然他有一个三列布局（因此是 0.33...三分之一），他想为 12em 宽的列腾出空间。所以他从 calc()

希望你现在明白了。

于 2016-01-25T22:42:37.283 回答
0

我喜欢用 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>

于 2017-02-13T09:22:05.453 回答