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!

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 Responsive Layouts Media Queries Creating Breakpoints

Chris Pulver
Chris Pulver
7,624 Points

CSS Breakpoints and Browser Zoom


I'm wondering about CSS media queries and how browser zoom is taken into consideration.

For example, I have a navigation that I'm wanting to modify as the screen size grows. Using Chrome Dev Tools to determine the width that I want to use for the breakpoint, I've determined that 505px is a good spot. However, if I change the zoom of the browser from 100% to 75%, the navigation obviously no longer looks the same, and the breakpoint would be down around 350px.

How is zoom taken into account when determining breakpoints? Should I always use 100% when using Dev Tools to determine my width?

Hoping this makes sense! TIA!

3 Answers

The browser zoom wont change the media query but does change the value of the browser width.

So for example if your browser window is at 1000px width and 100% browser zoom. When you zoom in to 200% your browser window width is now 500px or if you zoom out to 50%, the browser window width is now 2000px. Note that as you zoom in the width reduces.

You don't have to change your media query, and you can use the zoom to emulate smaller or bigger screens whilst displaying the page at the same physical size on your screen.

Hope this helps.

Chris Pulver
Chris Pulver
7,624 Points

Ok I think I got it. If I'm at 100% I would use the width displayed in dev tools, but if I'm at any other percent, I would need to do the calculation to determine pixel count. Is that right?

Ashanti Haring
Ashanti Haring
3,918 Points

I am a beginner, but just read an article about what you described.

Instead of width: 505px try 31.56 em (which is 505px divided through 16px, ). A fixed value like pixels is not the best way to "responsiveness". Relative units like percentage, em, and rem are a better approach in this case.

Quote: "authoring media queries in relative units allow browsers to adjust the design based on the user zoom level, resulting in a more pleasant, more accessible reading experience. " (Brad Frost)

Read this great article: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ at "use relative units".

Best, Ashanti