3 ms·
The CSS Media Queries Level 4 spec actually includes fractional pixel values as part of the examples for browsers which do not yet support the range syntax: htt
by nhardy 3y ago
The CSS Media Queries Level 4 spec actually includes fractional pixel values as part of the examples for browsers which do not yet support the range syntax: https://www.w3.org/TR/mediaqueries-4/#mq-min-max https://www.w3.org/TR/mediaqueries-4/#mq-min-max
> One approach to work around this problem is to increase the precision of the values used for the comparison. Using the example above, changing the second comparison value to 320.01px significantly reduces the change that a viewport width on a device would fall between the cracks.
The .02/.98 values might seem strange, but many popular libraries use these offsets (including Bootstrap: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss https://github.com/twbs/bootstrap/blob/main/scss/mixins/_bre...).
The way I tend to work with media queries is not writing them directly but rather use a mixin (when using SCSS) or a media function (CSS-in-JS). That way, this weird quirk can be documented just once in an application, leaving anyone curious enough with the explanation. There tends to be an 'upTo(breakpoint)' function which is an exclusive range, and a 'from(breakpoint)' which is inclusive.
- chrismorgan 3y agoIf you have only one clause, using a negated clause is strictly superior. The only reason to go fractional is if you have multiple clauses, since Level 3 only supported negation of the entire thing. I think that’s why using negation has never been particularly common, because people sometimes like to basically do `(width >= 480px) and (width < 768px)`. (In my experience, you’re normally better stacking the queries—e.g. mobile default, then (min-width: 480px), then (min-width: 768px)—rather than attempting to apply them exclusively, though there are certainly sometimes reasons to do it otherwise.)