Fractional Pixels in CSS Media Queries (Chrome)

user_7823264 0
Viewed 652

Our designer was testing a responsive site on his 4k monitor. One of the breakpoints is as follows:

<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.css" type="text/css" />

Simple enough. He managed to find a point in between 999 and 1000 pixels where the CSS broke and the page went out of whack. After some serious head-scratching, this fixed the issue:

<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999.9px)" href="/css/tablet.css" type="text/css" />

I couldn't find anything about using fractional pixels in media queries when I Googled it. Is it even a thing? Is this the best way to do it, or is there a better alternative?

responsive-design google-chrome css
1 Answers

It seems like it did come up for Chromium as a bug but was marked fixed and thus should not be possible: https://bugs.chromium.org/p/chromium/issues/detail?id=689096

In this old thread about a bug in Firefox they are speaking about the same issue, although this is not marked fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1120090

In that thread the fractional pixels in media queries are mentioned like they would be a normal thing.

I do web development on a high DPI screen for 7 years now and this has not happened to me yet. I would say it's not really a thing. One way to avoid it completely would be designing from the biggest or smallest screen upwards (or downwards), just overwriting and thus exclusively using min-width or max-width.

user_67152720
Related