为什么 calc 在用于字体大小时不会重新评估？

Question

我尝试将 VW 和 calc 一起使用并且工作但只计算了一次：加载时间：

http://codepen.io/anon/pen/mJOGbr

html{
  font-size: calc( 16px + 2vw ); 
}

如何在调整浏览器窗口大小时强制评估该计算？ 它被评估一次，但不再被评估。 没有 calc，VM 可以正常工作...

提前致谢！

Answer 1

请注意，如果您使用的是较旧的 webkit 浏览器，则确实可能会出现无法调整大小的问题。 See this post。 （滚动到“错误！”）

Chrome 20+ / Safari 6+ 中提供支持，但其中一个失败了 相当重要的方式。调整浏览器窗口大小时，字体 不会根据新的视口大小自行调整。规格 说：

当视口的高度或宽度改变时，它们会被缩放 因此。我弄错了。也许不是一场巨大的灾难，因为它很漂亮 很多只是我们设计的书呆子四处调整浏览器窗口， 但仍然。字体会在新页面加载时进行调整。

要解决此问题（允许在不刷新页面的情况下调整大小），您需要 导致元素上的“重绘”。我使用了 jQuery，只是摆弄着 每个元素（在这种情况下是不相关的）z-index 值，它触发 重绘。

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {   causeRepaintsOn.css("z-index", 1); });

更新：不要再担心这个了，绝对不要强迫 那些重绘。此大小调整问题已在 Chrome 34+ 和 Safari 中修复 7+。在移动设备上更改视口大小并不常见，因此 我不确定这个错误是否影响了他们。