CSS媒体查询否定[重复]

Posted 2023-03-06

【中文标题】CSS媒体查询否定[重复]

【英文标题】：CSS Media Query Negation [duplicate]

【发布时间】：2018-02-17 05:20:34

【问题描述】：

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

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

谢谢！

【问题讨论】：

min/max-device-width/height 已弃用

那么如何定位 Ipad？

【参考方案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.

【讨论】：

更新了我的问题

更新了我的答案@enigma969

我的 IDE 说这两个媒体查询在语法上都不正确？

伟大而详尽的答案，@ZombieChowder！ – only 只保护真的，真的旧浏览器（IE8 及以下），对吧？这些天应该没有实际意义吗？

我想知道，screen and 是否对任何人有任何好处：打印视图肯定比假设的“常规 72 dpi 分辨率”更多，对吧？ （我的 9 针打印机 anno 1989 有 144 dpi... :) – 使用更高分辨率的“视网膜图像”而不是标准的打印输出，应该是质量改进，不是吗？ （虽然在 css 中写起来更短更简单......不是吗？）