Search code examples
cssmedia-queries

Media queries + browser zoom

I've come across a super weird problem when it comes to media queries and browser zoom.

I'm using Chrome 52.0.2743.116 m.

The issue is this:

When you zoom in using the browser zoom to 125% and resize the browser until tablet is supposed to kick in (max-width: 1024px), there seems to be a moment where neither max-width: 1024px or min-width: 1025px is true.

If I change it to max-width: 1024.9px - it works.

Here's a quick example:

<div class="box">
   Text
</div>
<div class="box">
   Text
</div>
<div class="box">
   Text
</div>

And the CSS:

@media (max-width:768px) {
    .box {
        background: blue;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .box {
        background: red;
    }
}

@media (min-width:1025px) {
    .box {
        background: green;
    }
}

Example: http://codepen.io/tomusborne/pen/EyrNvG

Zoom in 125%, then resize down until it turns red. Resize up pixel by pixel, and you'll notice there's no background color at all for one pixel between tablet and desktop.

Anyone know what's going on here? Is using 1024.9px a decent solution? Am I just going crazy?

Solution

  • Inspecting the <html> element holds the answer:

    screenshot

    So the page width is actually greater than 1024px and less than 1025px.

    I suggest using the exact same values for both min-width and max-width.
    This covers all widths, without gaps, and if there is a collision (i.e. the page is exactly 1024px wide) then whichever rule appears later in the document should take precedence.