Question

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!

Answer 1

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.