CSS 媒体查询否定

<分区>

我想将此条件转换为 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
}

因此，如果它是任何设备且当前宽度 < 1200 像素，或者如果它是 Ipad(因此是最小/最大设备宽度)并且处于纵向模式，则应应用 CSS。

谢谢!

最佳答案

@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) { ... }

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

媒体类型是'screen'并且视口(viewport)至少有 700 像素宽并且屏幕方向当前为横向。注意:我相信这三个特征查询一起使用可以构成一个媒体查询。

<强>2。 OR(逗号分隔列表)

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

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

指定的样式规则将在任何一个媒体查询评估为真时生效:

媒体类型是“手持式”或视口(viewport)至少有 650 像素宽或屏幕方向当前为横向。