我发现以下基于视口(viewport)大小调整文本大小的 JS 解决方案非常优雅:
https://stackoverflow.com/a/10295733/1318135
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}
但是,有两个问题:
它依赖于正在调整大小的视口(viewport)。我也想在页面首次加载时触发它,但我是 JS 的新手。
我的页面完全使用 em 值进行编码;这使用像素。我如何使用它来调整仅默认 em 大小,然后它会自动渗透到页面上的所有其他元素?
谢谢!
最佳答案
查看其他答案(或将 http://jsfiddle.net/cjzEK/1/ 放在页面底部)
em 本身不是一个尺寸。这是百分比的不同写法。 em 对你有用的唯一方法是因为在浏览器中设置了 1 个基本字体大小(或者也可能是重置样式表)。浏览器中字体的通常基本大小是 16px。因此,此解决方案所做的是通过将其添加到正文来更改基本大小(将其添加到 html 可能会更好)。
例如p{font-size:1em;}
没有进行任何重置将是 16px。 1.5em 将是 24px。
关于javascript - 为流畅/响应式设计调整文本大小的优雅解决方案的性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11798926/