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
Chris Pulver
7,624 PointsCSS 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
Ashanti Haring
3,918 PointsI 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
Callum Booth
1,970 PointsThe 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
7,624 PointsOk 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?
Mustafa Khan
6,224 Points?¯_(ツ)_/¯