Menu icon Foundation
Help calculating px value of em media query

704px

705px

Hi,

I'm having trouble working out how media query EMs are calculated in foundation, specifically when the breakpoint actually kicks in and becomes active.

When I visit this page http://foundation.zurb.com/templates/orbit.html in Chrome on Windows 8, and inspect the a.orbit-prev element with insepctor tools, it shows me that there is a min-width: 40.063em media query setup, that when active shows the navigation link (display:inherit, from display:none). I have measured both with the inspector tools live page width in pixels and in photoshop, and the change occurs at 705 pixels.

Screenshots attached to post.

My question is, how is this calculated? The font size is set to 100% in the html and body, so surely 40.063ems should equal 16 * 40.063 = 641.01 pixels, not 704px as is currently happening?

The reason I ask is I would like to change breakpoints, but still use pixels as a measuring tool to calculate when that change should happen.

Thanks

empxbreakpoints

704px

705px

Hi,

I'm having trouble working out how media query EMs are calculated in foundation, specifically when the breakpoint actually kicks in and becomes active.

When I visit this page http://foundation.zurb.com/templates/orbit.html in Chrome on Windows 8, and inspect the a.orbit-prev element with insepctor tools, it shows me that there is a min-width: 40.063em media query setup, that when active shows the navigation link (display:inherit, from display:none). I have measured both with the inspector tools live page width in pixels and in photoshop, and the change occurs at 705 pixels.

Screenshots attached to post.

My question is, how is this calculated? The font size is set to 100% in the html and body, so surely 40.063ems should equal 16 * 40.063 = 641.01 pixels, not 704px as is currently happening?

The reason I ask is I would like to change breakpoints, but still use pixels as a measuring tool to calculate when that change should happen.

Thanks

Patrick Whitty-Clarke almost 6 years ago

Ah I'm sorry, I was using Windows 8 Scaling and browser zooming. My bad! :)