I have a media query set to a break point of 480 pixel. At that point the logo changes size.
I think the break point should be based on 16px. I think the 480 break point should be 480px/16 = 30em. However to get the break point to engage at 480px I have to use 480px/20 = 24em. Same for the next smaller break point. Should be 320px/16 = 20em but to get the break point to engage at 320px I have to use 320px/20=16em.
My question - I have font-size: 100% in the body rule. I think the em should be based on 16 and I can’t understand why is it being based on 20?
There is no specific relationship between em and pixels. While 16px is the default value in many browsers it doesn’t have to be. Also if the person changes their browser zoom setting to anything other than 100% then the relationship between pixels and em will change dynamically.
If you have a breakpoint that needs to apply at a specific pixel value then use the pixel value to apply it.
I guess I am confused. My understanding is that em size is related to the containing element, which in this case is Body. Any subsequent containing elements with width assigned would affect the em size within those elements. If the Body element has no assigned width or size and font-size is set to 100% then 1em = 16pixels? I think I have that configuration in my test file.
em is used for the reason you state, if someone increases the browser font size or zoom factor then all the elements (hopefully <g>) re-size all proportionately to the increased font size?
I still can’t figure out why my em is based on 20. I’m testing this with Chrome.
For me, that breakpoint kicks in when the browser is 384px wide. Perhaps you have zoomed your page and forgotten to reset it? Anyhow, it’s a good way to learn about what felgall notes: that ems have nothing to do with pixels.
However, it does require you to take a much more ‘flexible’ attitude to web design … something I find most people are not ready for. Most designs I’m asked to code are still locked down to the nth pixel.
You called it. I had font set to “large” versus “medium” in Chrome. when I re-set to “medium” (I think the default) the break point kicks in at 384px same as for you.
I have a flexible attitude and want to use em for breakpoints and all widths and I’m striving to be proficient at responsive design. I’m not interested in going back to fixed width and locking down to the nth pixel. the first time I read about responsive design my feeling was wow … nothing else will do.
