Is there a way to negate @media min/max-width/height? [duplicate]

Question

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?

Rabies

I wouldn't do this I never use min-width. I start large and work down... [at]media screen and (max-width:1025px){ /// overrides } [at]media screen and (max-width:769px){ /// overrides 1024px } As css is sematntic you'll always override with the smaller screensizes that way. – Assuage

Why did not (min-width: 500px) not work, assuming you followed the documentation and wrote it as not all and (min-width: 500px)? – Fraase

Cool! Will try not all and. However, what about merging it with other statements? E.g. how do I translate (min-width: 840px) and (max-height: 399px), where only the 99 one has to be negated? – Rabies

I put a comment on earlier and then saw what you are trying to do. What about this? Not tried it though because I always just use max-width at the break-point I want, but could you combine it like this? @media screen (min-wdth:500px) and (max-width:499px) {....} I still think doing it large to small is better because putting in the break-point on max width is better and no need for min-width. – Assuage

Answer 1

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

Thereon

Cool! Will try not all and. However, what about merging it with other statements? E.g. how do I translate (min-width: 840px) and (max-height: 399px), where only the 99 one has to be negated? – Rabies

I edit 'max' to 'min'. By mistake I added that. Also, I am not sure why you want to negate when you can use "not of" just width or device-width in media query.. Can you please elaborate what are your needs because I think this can be avoided by good set of min- and max-width media rules – Thereon

I didn't get what's "99" in this line "(min-width: 840px) and (max-height: 399px), where only the 99 one has to be negated". Also, do you want to look into aspect ratio media query rules! That might also help. – Thereon

I'm accepting this; I'll also +1 if you address the above comment. :-) – Rabies

+1!! I am not here for points. As long as answer helps what you asked for, then it's good for you and others. Also, before me addressing your above comment, it would have been much better if you would seen my comment asking if there is a typo in your comment. If "99" in it is "399" then possible logical operation is @media screen and (min-width: 840px) and (not all screen and (max-height: 399px) ) {}. I think this is what you asked. But in general, we need not to go for so complex logical operation unless you really need them or you're experimenting :P – Thereon

no, I don't think your example of and (not all and works -- I think not can only negate the whole expression (per your own link), and since it can't include or within not, looks like there's no way to do a negative and. :-( – Rabies

"You think"! You tried? Syntactically it's correct. Medeia rules follow logical operations. Also, I would suggest you to confirm which of the above rules in the answer works. Also, else way you can try putting it in parentheses (@media screen and min-width: 840px) and (not all screen and (max-height: 399px) ) {} – Thereon

no, it is not correct syntactically, and it certainly doesn't actually work – Rabies

@Rabies Whatever I wrote in the last comment, is syntactically right. I hope you've tried that comment instead of previous ones. Note the brackets. – Thereon

No, you are wrong, it is absolutely not syntactically correct (even if you add the missing parenthesis). You cannot use not after an and. It's basically clearly documented in the very doc you've linked to! – Rabies

The docs now describe full-blown boolean logic for separate features! I can't wait to use this! – Homology