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

A Laypanov
A Laypanov
27,579 Points
Posted by A Laypanov
A Laypanov
27,579 Points

Absolute units of length for breakpoints.

Hello. I have a question about CSS breakpoints. Why no one uses absolute units like inches when setting a breakpoint. New devices being announced daily , pixel density of the screens various a lot. Why not to use screen's actual width as a base. Media futures like "resolution" and "orientation " can be omitted , designs will be future proof. But the fact that no one mentions it, makes me feel like I'm missing something here.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi A Laypanov

I used to think the same way. In my earliest years in doing responsive design I used to try and target specific device widths. I'd take a note of the most popular devices and their screen resolutions and target them accordingly.

But that misses the point of using media queries. I think that we use the px unit when targeting devices in media queries because that's the most accurate measure we have. And when we do these we're testing for minimum and maximum widths. Nothing specific.

We're not looking for specific device widths. What we're doing is looking for points in device widths where the CSS layouts have a look that is not good on the eye. Where the layouts break. We call these "breakpoints". Our media queries are used to catch these breakpoints and fix the layout.

It's great that we have media queries that check for other things like orientation and resolution but by fat the most popular and accurate is width and device-width.

Hope this helps. :-)

A Laypanov
A Laypanov
27,579 Points
A Laypanov
A Laypanov
27,579 Points

So as I understand, when placing breakpoints we shouldn't base it on physical dimensions but rather on websites appearance. I see logic in this, but still have to experiment to fully digest it. Thank you for clarifying it, that question was bugging me for a few days now.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

This point causes a bit of confusion, mostly because the unit px or 'pixel' was used when naming the CSS standard. In CSS, the unit px does not refer to one pixel on the screen. Rather, as described in this W3 document, 1px is equivalent to 0.75pt, where 1pt is equivalent to 1/72 inches, which makes 1px equivalent to 1/96 inches.

As Jonathan also points out, with media queries, it's always a best practice to create your breakpoints where your layout starts to break rather than relying on using specific device widths. That way, you can ensure your content looks good even if some crazy unheard-of device widths start popping up.