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
Richard Nash
24,862 PointsWhy 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
39,199 Points2 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:
Ryan Duchene
Courses Plus Student 46,022 PointsI think this article explains it very well. TL;DR, ems don't depend on the physical device size, whereas pixels do.
Guil Hernandez
Treehouse TeacherHi 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
24,862 PointsThanks 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
24,862 Pointsbtw, 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
24,862 PointsI 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