CSS Media Query Negation

Question

I would like to transform this condition to a CSS media query:

if(min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) {
   // apply CSS
}

Edit:

Actually I want to target Ipads within this condition:

if((min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) 
|| (min-device-width == 768px && max-device-width == 1024px && orientation == 'portrait')) {
       // apply CSS
}

So the CSS should be applied if it's any device and current width < 1200px OR if it's an Ipad (therefore the min/max-device-width) and it's in portrait mode.

Thanks!

Answer 1

@media screen (max-device-width: 1200px) and (orientation: portrait) {
    // apply CSS
}

  @media screen and (min-width: 768px) , (max-width: 1024px), (orientation: portrait) {
  ...
}

I think that you totally skip the part with max-device-width != 1024px since it's a resolution lower than 1200px and falls under that category. It all depends on what kind of screen sizes are you aiming for.

I think that this question provides a nice explanation on how to use both min and max in the same query. Example Question

1. AND (and keyword)

Requires that all conditions specified must be met before the styling rules will take effect.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

The specified styling rules won't go into place unless all of the following evaluate as true:

The media type is 'screen' and The viewport is at least 700px wide and Screen orientation is currently landscape. Note: I believe that used together, these three feature queries make up a single media query.

2. OR (Comma-separated lists)

Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

The specified styling rules will go into effect once any one media query evaluates as true:

The media type is 'handheld' or The viewport is at least 650px wide or Screen orientation is currently landscape.

3. NOT (not keyword)

The not keyword can be used to negate a single media query (and NOT a full media rule--meaning that it only negates entries between a set of commas and not the full media rule following the @media declaration).

Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.*

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

The styling specified here will go into effect if

The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or The viewport is at least 800 pixels wide. In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels.

(The not keyword can be a little funky to state. Let me know if I can do better. ;)

4. ONLY (only keyword)

As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. When used correctly, older/non-compliant browsers should just ignore the styling altogether.

An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type. (See here and here for more info from smarter people)

COPIED AND PASTED from this Answer. Please read it for more information:THIS is the original answer.