Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML SVG Basics SVG and CSS Responsive SVGs

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

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

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.

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.