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

CSS

Posted by David Bilson
David Bilson
13,819 Points

Use relative units - media queries

Why is the workspace example using pixel based units when the article, by Brad Frost, that Nick Pettit links to in his instructor notes recommends to use relative units?

This is what is so confusing to me about media queries. There is so much conflicting information about this and even the people teaching this stuff recommend one thing and then give examples which contradict their recommendations.

/* Avoid pixel-based media queries */
@media all and (min-width: 800px) {...}

/* use ems for media queries */
@media all and (min-width: 50em) {...}

Nicks workspace example uses pixel based units, go figure!

/*************************
Media Queries
*************************/

@media only screen and (min-width: 480px) {...}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The choice of unit is probably best made with the content being displayed in mind.

If the contents are exclusively text, em units might make sense. But if images are involved, pixel units could be a better choice. No single unit will be best in all situations.

You didn't provide a link to a course video, so this is a bit of a guess, but some possible reasons the course video may show pixel units:

  • the media query may involve images
  • it is intended to simplify the introduction of media queries
  • reasons for chosing em units might not have been covered yet but will be later
David Bilson
David Bilson
13,819 Points

Steven,

Thanks for your reply. The course in question is this one:

https://teamtreehouse.com/library/responsive-layouts/media-queries/creating-breakpoints

The mockup used by Nick Pettit is a modified version of the http://www.initializr.com/ project.

However it looks like he just changed the colour of it to green, so it matches the colour of his previous course. The only other changes I can see is that he changed the h1 headline and the name on the nav elements.

I would have thought that if he was recommending using relative breakpoints, that he would have also changed the pixel breakpoints to ems.

I am trying to learn web design the correct way, which is why I subscribe to teamtreehouse.

FAO Nick Pettit - Is the recommended method for creating beakpoints using pixels or ems.

If it is ems, can you change the example download to ems. Otherwise, it is just confusing to people new to this.

From my understanding, to change pixels to ems I would devide the pixel width by the default font size. This is usually 16px?

480 / 16 = 30ems

/*************************
Media Queries
*************************/

@media only screen and (min-width: 30ems) {...}