8

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?

cnst
  • 25,870
  • 6
  • 90
  • 122
  • 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. – user1712691 Apr 12 '16 at 21:59
  • Why did `not (min-width: 500px)` not work, assuming you followed the documentation and wrote it as `not all and (min-width: 500px)`? –  Apr 12 '16 at 21:59
  • 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? – cnst Apr 12 '16 at 22:08
  • 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. – user1712691 Apr 12 '16 at 22:14

1 Answers1

13

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

master_dodo
  • 1,203
  • 3
  • 20
  • 31
  • 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? – cnst Apr 12 '16 at 22:11
  • 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 – master_dodo Apr 12 '16 at 22:14
  • 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. – master_dodo Apr 12 '16 at 22:16
  • I'm accepting this; I'll also +1 if you address the above comment. :-) – cnst Apr 12 '16 at 22:19
  • +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 – master_dodo Apr 12 '16 at 22:30
  • 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`. :-( – cnst Apr 12 '16 at 22:45
  • "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) ) {} – master_dodo Apr 13 '16 at 07:02
  • no, it is not correct syntactically, and it certainly doesn't actually work – cnst Apr 13 '16 at 18:00
  • @cnst Whatever I wrote in the last comment, is syntactically right. I hope you've tried that comment instead of previous ones. Note the brackets. – master_dodo Apr 15 '16 at 10:47
  • 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! – cnst Apr 15 '16 at 18:34
  • [The docs](https://www.w3.org/TR/mediaqueries-4/#media-conditions) now describe full-blown boolean logic for separate features! I can't wait to use this! – Gust van de Wal Feb 16 '20 at 00:30