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
Miguel Enriquez
2,057 Points@media or em?
Which one is a better practice for responsive web design?
To me it seems like em would be the better option.
2 Answers
Alexander Davison
65,469 PointsA lot of the time, em is easier, but occasionally, you might want to have more control over the changes on different window-sizes/devices, thus you use @media. Generally, you only need em, and for more complicated changes, @media is your pal.
Brendon Butler
4,254 Points"em" is a measurement unit relative to your font size and it doesn't change if you have the same device with different screen sizes (there are other instances where it doesn't work, but this is a big one).
Say you have a laptop and a desktop. The laptop has a 15.6" screen at 1366x768 and the desktop has a 27" monitor at 2560x1440. In Windows, you have the same font size. If you scripted your website and tested using your laptop, once you switch to your desktop, anything using em will be too small (if you mix em and px everything will be disproportional).
"@media" is a CSS rule that can manipulate your entire website if you wanted (you could have a website that is completely different on mobile than it is on a desktop). It also isn't just for scaling your site, you can change colors, images, etc. Take a look at CSS @media Rules.
You should be using both honestly. That's what I do for my website.