Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics SVG and CSS Responsive SVGs

Posted by Allison Walker
Allison Walker
17,137 Points

em sizes for @media

Nick uses 'min-width:30em', 'min-width:40em', and 'min-width:64em' for his screen sizes. Just curious where those came from and/or if there's some type of formula he's using to come up with those.

Thanks

Earvin Asin
Earvin Asin
16,896 Points

Hi Allison,

This article might help answer your question: The Power of em Units in CSS

2 Answers

Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points
Ferdinand Pretorius
Ferdinand Pretorius
18,705 Points

Hi Allison,

What Nick did here is is quite common practise. Although most developers would change the global font size to have the value of 1em = 10px, i won't go into that too much. To answer the question of where the values come from:

1em = 16px

30 x 16px = 480px | 40 x 16px = 640px | 64 x 16px = 1024px

I also recommend checking out the link that Earvin posted.

Hope this cleared things up.

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

Well, chances are I know why you ask that.... Maybe you're thinking that earlier Nick used all those px units and now he's using ems, which one should I use. Well, I thought of that too, and then I remembered that this world of tech is that of a forever changing one. So you can't always stick to one certain thing, that's nigh impossible. You must adapt yourself to changes as time passes by and new tech kicks in. The same thing happened here. Earlier the concept of responsive web design was not so famous and now it's the basis of web design. So yes, now the "best practices" also have changed and they will continue to do so. Maybe I took a bit to long to answer this. Sorry for that. You had to wait a full one year. But thanks to those who made the matter clear prior to me.

Hope that helps.