CSS媒体查询否定[重复]

Question

我想将此条件转换为 CSS 媒体查询：

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

编辑：

实际上我想在这种情况下定位 Ipad：

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

因此，如果它是任何设备且当前宽度

谢谢！

Answer 1

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

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

我认为您完全跳过了 max-device-width != 1024px 的部分，因为它的分辨率低于 1200px 并且属于该类别。这完全取决于您的目标是哪种屏幕尺寸。

我认为这个问题很好地解释了如何在同一个查询中同时使用min 和max。 Example Question

1. AND（和关键字）

要求在样式规则生效之前必须满足所有指定的条件。

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

除非满足以下所有条件，否则指定的样式规则不会生效：

媒体类型是“屏幕”并且 视口至少 700 像素宽，并且 屏幕方向当前为横向。 注意：我相信这三个特征查询一起使用，构成了一个媒体查询。

2。或（逗号分隔的列表）

而不是 or 关键字，逗号分隔的列表用于将多个媒体查询链接在一起以形成更复杂的媒体规则

@media 手持设备，（最小宽度：650 像素），（方向：横向）{ ... }

一旦任何一个媒体查询评估为真，指定的样式规则就会生效：

媒体类型是“手持”或 视口至少为 650 像素宽或 屏幕方向目前为横向。

3. NOT（不是关键字）

not 关键字可用于否定单个媒体查询（而不是完整的媒体规则——这意味着它只否定一组逗号之间的条目，而不是 @media 声明之后的完整媒体规则）。

同样，注意 not 关键字否定媒体查询，它不能用于否定媒体查询中的单个特征查询。*

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

此处指定的样式将在以下情况下生效

媒体类型和最小分辨率都不满足他们的要求（分别为“屏幕”和“300dpi”）或 视口至少有 800 像素宽。 换言之，如果媒体类型为“屏幕”且最小分辨率为 300 dpi，则除非视口的最小宽度至少为 800 像素，否则该规则不会生效。

（not 关键字可能有点古怪。如果我能做得更好，请告诉我。;）

4. ONLY（仅关键字）

据我了解，唯一的关键字用于防止旧浏览器将较新的媒体查询误解为较早使用的较窄媒体类型。如果使用得当，旧的/不兼容的浏览器应该完全忽略样式。

旧的/不兼容的浏览器会完全忽略这行代码，我相信它会读取唯一的关键字并认为它是不正确的媒体类型。 （有关聪明人的更多信息，请参见此处和此处）

从这个答案复制并粘贴。请阅读它以获取更多信息：THIS is the original answer.