max-width using em

css em
daveywc picture daveywc · Feb 29, 2012 · Viewed 11.7k times · Source

Can someone please explain how the em unit of measurement works with the max-width css property? On my screen resolution of 1920 x 1080 I have found that setting the max-width to 140em is the equivalent of max-width of 100%.

Answer

Sebastian vom Meer picture Sebastian vom Meer · Feb 29, 2012

Em is just another unit. It depends on the font size. Current font size (e.g. 14px) = 1em. 2em doubles the font size (28px).

Have a look at your screen resolution: 1920/140 = 13,714285714 - looks like your current font size is 14px. Therefore setting max-width:140em is the same like max-width:1920px or max-width:100% - in your special case.

Related questions

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More
Why em instead of px?

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that …

Read More
What is the em font-size unit? How much is it in pixels?

I want to know what the em unit is, and how much 1em is when converted to pixels (px). I also read somewhere about some IE bug, to overcome which body font-size should be set to something, but couldn't follow …

Read More