Menu
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?
925
320px — 480px: Mobile devices. 481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. Syntax: @media only screen and (max-width: width) Example 2. <! DOCTYPE html>
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
