调整流体/响应式设计的文字大小的优雅解决方案的性能？ [英] Tweaking performance of elegant solution to text resize for fluid/responsive designs?

问题描述

我发现下面的JS解决方案基于视口大小的文本大小调整相当优雅：

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

  onresize = onload =函数（）{document.body.style.fontSize = window.innerWidth +px} 
  

有两个问题：

1. 它依赖于被调整大小的视口。我想在第一次加载页面的时候触发它，但是在JS中是一个newb。

我的页面完全使用em值编码;这使用px。我怎样才能使用这个来调整默认的em尺寸，然后这个尺寸会自动下降到页面上的其他元素？

http://jsfiddle.net/hFNc7/

谢谢！

解决方案

1. 其他答案（或将 http://jsfiddle.net/cjzEK/1/ 放在你的底部页面） em本身不是一个大小。这是一个百分比写的不同。 em唯一适用的方式是因为在浏览器中设置了1个基本字体大小（或者也可能是重置样式表）。浏览器中字体的基本大小是16px。所以这个解决方案所做的是通过将其添加到主体来改变基本大小（将其添加到html中可能会更好）。

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

I find the following JS solution to having text resize based on viewport size quite elegant:

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

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

However, there are 2 issues:

1. It relies on the viewport being resized. I'd like to trigger it when the page is first loaded as well, but am a newb at JS.

2. My page is coded entirely using em values; this uses px. How can I use this to adjust the default em size only which will then automatically trickle down to every other element on the page?

http://jsfiddle.net/hFNc7/

Thanks!

解决方案

1. See other answer (or put http://jsfiddle.net/cjzEK/1/ on the bottom of your page)

2. em is not a size on its own. It's a percentage written differently. The only way em works for you is because there is 1 base font-size that is set in the browser(or also likely a reset stylesheet). The usual base size of fonts in browsers is 16px. So what this solution does is changing the base size by adding it to the body(adding it to the html might be even better).

e.g. p{font-size:1em;} without any reset done will be 16px. 1.5em will be 24px.

这篇关于调整流体/响应式设计的文字大小的优雅解决方案的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！