javascript - 为流畅/响应式设计调整文本大小的优雅解决方案的性能？

Question

我发现以下基于视口(viewport)大小调整文本大小的 JS 解决方案非常优雅:

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

但是，有两个问题:

1. 它依赖于正在调整大小的视口(viewport)。我也想在页面首次加载时触发它，但我是 JS 的新手。

2. 我的页面完全使用 em 值进行编码；这使用像素。我如何使用它来调整仅默认 em 大小，然后它会自动渗透到页面上的所有其他元素？

http://jsfiddle.net/hFNc7/

谢谢!

Answer 1

1. 查看其他答案(或将 http://jsfiddle.net/cjzEK/1/ 放在页面底部)

2. em 本身不是一个尺寸。这是百分比的不同写法。 em 对你有用的唯一方法是因为在浏览器中设置了 1 个基本字体大小(或者也可能是重置样式表)。浏览器中字体的通常基本大小是 16px。因此，此解决方案所做的是通过将其添加到正文来更改基本大小(将其添加到 html 可能会更好)。

例如p{font-size:1em;} 没有进行任何重置将是 16px。 1.5em 将是 24px。