Menu
I use http://www.w3.org/TR/css3-mediaqueries/ to have different design depending on the available viewport.
In order for my search-and-replace to work, for every time I decide to adjust the cut-off points, I'd like to clearly negate @media (min-width: 500px), which intersects on (max-width: 500px), and, therefore, has to be manually negated as (max-width: 499px) instead, which then breaks search-and-replace.
I've tried not (min-width: 500px), but it doesn't seem to work at all. Is there a way to negate @media (min-width: 500px), such that the negative query will still have 500px in it, for my search-and-replace to work?
577
The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles.
Remember that the min- and max- prefixes mean "minimum inclusive" and "maximum inclusive"; this means (min-width: 20em) and (max-width: 20em) will both match a viewport that is exactly 20em wide.
@media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths. CSS Tricks has an up to date list of standard device widths and the media queries to use.
@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.
Try this
@media not all and (min-width: 500px) {
//selectors
}
You may also try depending upon your needs,
@media not screen and (device-width:500px)
This doesn't work
not (min-width: 500px) {}
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
180
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
