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

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Mark Phillips
Mark Phillips
13,124 Points

Ems vs Pixels as breakpoints

Isn't it better to use EMs instead of Pixels for the breakpoints, as EMs account for user zoom on the page, whereas Pixels do not?

3 Answers

Mark Phillips
Mark Phillips
13,124 Points

Having fixed widths for layout and positioning seems counter-intuitive to responsive design, which by it's very nature is supposed to adjust and flow based on screen resolutions, user preferences for font-size and the like. If users change their base font sizes, and zoom up in their browsers, fixed width layouts will break as the pixels will not react to elements around them like ems would.

Kevin Korte
Kevin Korte
28,148 Points

I disagree Darrel Lyons I've moved over to using em's everywhere. I have a simple Sass mixin that lets me give it a px value and it outputs the correct em's for the CSS. I haven't found a downside yet, except to be careful about how em's are relative values to their parent...just gotta pay attention there.

Darrel Lyons
Darrel Lyons
2,991 Points

Font sizes in EMs, layout and positioning in PXs. :)