I am coding my first responsive layout using CSS @media queries. I've added the <meta name="viewport" content="width=device-width"> to my html so I have a strict series of device-width based font-size layouts. And, I'm using em's to (hopefully) give the most consistant browser resizing with html, body {width/height:100%; font-size: 1em}.
In my smallest case, I want to put the <h2> tag at a relatively small em in the range of < 0.5em. However, once I go below that amount it no longer resizes. The only option I can see is to switch back to pixels and to use some small 10px amount.
Maybe I could think about this a different way? Or maybe I am missing something in the specs for em. Any advice is appreciated.
Browsers all have a base font-size. Generally, that should be between 14px and 18px. If you don't specify a body font-size, 1em will equal the default font-size. Your example works for me, however, 0.5em = 50% of 14-18px => 7-9px. That is way too small to be properly readable.
Reference:http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
You can specify a bigger body font size (e.g, 24px), and in that case 0.5em will equal 12px, which is small, but still okay.
Additional note: be careful with setting
html, body {
font-size: 1em;
}
For me (in Google Chrome), this produced a different (smaller) font-size than
body {
font-size: 1em;
}
Most browsers have a "minimum font-size" setting that cannot be overridden. In Opera, the default minimum size is 9px. Since the default font-size for body text is 16px, .5em would calculate out to be 8px.
