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

Question

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

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

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

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

提前致谢！

Answer 1

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

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

当视口的高度或宽度发生变化时，它们会相应地缩放。我弄错了。也许这不是一场巨大的灾难，因为它几乎只是我们设计书呆子四处调整浏览器窗口，但仍然如此。字体确实会在新页面加载时进行调整。

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

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

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

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