css - 为什么 calc 在用于 font-size 时不重新计算？

Question

我尝试同时使用 VW 和 calc 并且有效但只计算了一次:加载时间:

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

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

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

提前致谢!

Answer 1

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

The support is there in Chrome 20+ / Safari 6+, but it fails in one rather significant way. When the browser window is resized, the font doesn't adjust itself according to the new viewport size. The spec says:

When the height or width of the viewport is changed, they are scaled accordingly. I bugged it. Perhaps not a huge disaster as it's pretty much just us design nerds that go around adjusting browser windows, but still. The font does adjust on a fresh page load.

To fix this issue (allow resizing without page refresh) you need to cause a "repaint" on the element. I used jQuery and just fiddled with each elements (irrelevant, in this case) z-index value, which triggers the repaint.

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

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

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