CSS Responsive Layouts Media Queries Creating Breakpoints

Chris Pulver
Chris Pulver
7,624 Points

CSS Breakpoints and Browser Zoom

Hi,

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,917 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