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

Design Web Typography Final Project: Create a Typographic Site Responsive Typography

Jean-Luc Robitaille
Jean-Luc Robitaille
13,864 Points
Posted by Jean-Luc Robitaille
Jean-Luc Robitaille
13,864 Points

Responsive design not mobile first. And why use em for media queries width

Hello! I found it weird that he is not designing the page with a mobile first approach. Shouldn't he be setting up the basic styles for the smaller screen sizes and then using media queries with min-width to go up to bigger screens?

Also, is there a specific reason why he is using em for media queries width sizes instead of pixels? It is the first time that I see this and I don't understand the advantage over doing it with pixels. From what I've seen, all other Treehouse courses use pixels for media queries width values. Is there a best practice concerning this?

Thanks!

Jean-Luc

2 Answers

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Jean-Luc,

Ems (and especially 'rems') are used more much more commonly than px values. Rems rooted to the default HTML font-size (which is 16px, so 1rem = 16px, 2rem= 32px). Ems are nested and get their base pixel value from their parent element (which can be any pixel value).

Rems and ems are more flexibel in use than pixels. For example if I change the base px value from 16px to 10px 1rem = 10px, 2rem = 20px, etc. It's especially useful in big projects in combination with SASS when I want to change a size without having single pixel value by hand. Also there are many more reasons why one would use rems or ems over px. Try googling it, there are many blog posts out there that touch upon this much better than I do.

To answer your first question: yes, he should be designing with a mobile first approach in mind. But since this is a tutorial it focusses on a specific topic.

Jean-Luc Robitaille
Jean-Luc Robitaille
13,864 Points
Jean-Luc Robitaille
Jean-Luc Robitaille
13,864 Points

Thanks for the answer! But I still don't understand the advantage of using rems or ems on media queries widths. Isn't that actually going to mess things up if the root width changes? To me it looks like having the media queries width in pixel is simpler and safer. No?

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Jean-Luc. While thinking about your questions I totally ignored the media querie part. Apologies for that :)

It's up to the developer or team of developers to decide what's best to use. Some prefer to use one single value throughout the project. Others only use pixels for media queries and rems (or ems) for the rest. The one thing pixel values mess up is when users change their browsers default font-size. Doing so will affect the behaviour of any media querie with a pixel value. A decent article about this phenomenon can be found here: https://zellwk.com/blog/media-query-units/

Hope it helps, Max

angiejang
angiejang
3,134 Points
angiejang
angiejang
3,134 Points

but even if em adjust to user's default size, wouldn't layout be distorted anyway since the whole scale of text changed?