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.

CSS Compass Basics Compass Layout and Typography Floats and Horizontal Lists

Richard Nash
Richard Nash
24,862 Points

Why are you using pixels for your media queries?

Hi Guil Hernandez,

I've learned recently that using ems for media queries seems to be a better practice than using pixels, especially when it comes to browser zooming for those with limited vision. I'm just curious as to why you are using pixels and not ems, and if there are other more practical reasons to use pixels instead of ems.

Thanks for your time and effort :-)

Richard Nash Los Angeles, CA

4 Answers

James Barnett
James Barnett
39,199 Points

2 thoughts:

Sometimes in programming there is no agreement on a best practice.

Check out:

http://stackoverflow.com/a/22390419/1756132


However, there is also a really good reason to use em-based media queries, ems work off a base font if the user has a base font other than 16px the layout will break.

Check the codepen example from the same stackoverflow question:

http://codepen.io/nwalton3/pen/xvnHy/?editors=010

I think this article explains it very well. TL;DR, ems don't depend on the physical device size, whereas pixels do.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Richard Nash,

Sure, em-based media queries are awesome when used properly. I haven't used them as much in my basics courses to avoid the extra cognitive load of em/px conversions, font-size-ing, etc.––especially when it's unrelated to the lesson at hand.

We will, however, cover em-based media queries in the upcoming Web Typography course and the new CSS content refresh.

Further, I still don't think em is THE canonical media feature unit, it's just what certain developers prefer. As I've mentioned in my courses––and James alluded to above: Find what works best for you and stick with it. :)

Richard Nash
Richard Nash
24,862 Points

Thanks for the reply Guil Hernandez :-)

I can understand the cognitive load issue for new students, and I'm glad to hear that typography and your refreshed courses will cover it.. Do you think there are any other advantages to using pixel based MQ's?

As I'm learning all this stuff my mind is racing with ideas and a little bit of fear of doing things the wrong way, but i'm also coming to realize just how wild and crazy the entire web development world is, as it grows and develops so rapidly. Watching your course on CSS layout helped me realize this, and waiting for the grid property to be finalized and supported across browsers kind of sucks :-(

Anyway, been learning so much from you and your team and I'm looking forward to learning more :-)

Cheers,

R

Richard Nash
Richard Nash
24,862 Points

btw, Sass + Modular Sass + BEM + SMACSS + Compass = Awesome workflow! Thank you for sharing this with the treehouse community. I'm craving this kind of workflow for HTML as well now, which is sort of what Google Polymer is trying to do, I think.

In my mind I can see a day when we think purely in percentages and ratios and all screen sizes will be served one set of elastic content that reshapes and reforms to fit everything, without the need to have multiple assets of the same thing. Apps like (http://www.paintcodeapp.com) are creating this possibility for OSX and SVG's are doing similar things for the Web. It probably will never be practical for photographic images to be served up as vector code, but what do I know? :-)

Cheers,

R

Richard Nash
Richard Nash
24,862 Points

I liked Lyza's article (The first one i read on the subject, actually), and Brad Frost's as well...

http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

To quote Brad...

"Every time you see 320px, 480px, 768px, 1024px used as breakpoint values, a kitten gets its head bitten off by an >angel…or something like that."

...that may be a slightly exaggerated statement but these articles make much sense, so I was surprised to see Guil Hernandez use pixels. Basically, I consider Guil to be awesome and em based media queries to be awesome so when he did not use them... I gotz confooozed. So I wondered if there were some hidden advantages to using pixel based MQ's or if compass only supports pixel based MQ's, etc...

That is all, and thank you for your replies, Ryan Duchene and James Barnett :-)

Richard