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
}

因此，如果是任何设备和当前宽度，则应应用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。示例问题

1.和（和关键字）

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

@媒体屏幕和（最小宽度： 700px）和（方向：风景）{...}

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

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

2.OR（以逗号分隔的列表）

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

@媒体手持，（最小宽度： 650px），（方向：风景）{...}

指定的样式规则将在任何一个媒体查询评估为true后生效：

媒体类型为“手持”或视口宽度至少为650px或屏幕方向当前为横向。

3.非（非关键字）

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

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

@介质不在屏幕上，并且（最小分辨率：300dpi），（最小宽度：800px）{…}

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

媒体类型和最小分辨率都不符合它们的要求（分别为“屏幕”和“300dpi”）或视口至少800像素宽。换句话说，如果媒体类型为“屏幕”，最小分辨率为300dpi，除非视口的最小宽度至少为800像素，否则规则将不会生效。

（not关键字可能有点令人讨厌。如果我能做得更好，请告诉我。）

4.仅限（仅限关键字）

据我所知，唯一的关键字是用来防止旧浏览器将新的媒体查询误解为较早使用的、较窄的媒体类型。正确使用时，旧的/不兼容的浏览器应该完全忽略样式。

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

从这个答案中复制并粘贴。请阅读更多信息：这是原始答案。