CSS @media display NOT in FALLSCREEN 不起作用？

【问题标题】：CSS @media display NOT in FULLSCREEN doesn't work?CSS @media display NOT in FALLSCREEN 不起作用？
【发布时间】：2022-01-16 00:43:39
【问题描述】：

如何为窗口模式设置 CSS 规则？

@media all and (display-mode: fullscreen) {
  .testfullscreen {
      display: none; /*Works*/
  }
}

@media all and not (display-mode: fullscreen) {
  .testwindowed {
      display: none; /*Not working*/
  }
}

codepen

【问题讨论】：

标签： css fullscreen media display windowed

【解决方案1】：

您已经非常接近了，您只需将not 移至乞讨。

根据 MDN 的文档：

Inverting a query's meaning

not 关键字反转整个媒体查询的含义。它只会否定它所应用的特定媒体查询。（因此，它不适用于以逗号分隔的媒体查询列表中的每个媒体查询。） not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询。在以下查询中最后评估 not：

@media not all and (display-mode: fullscreen) {
  .testwindowed {
    display: none; /*Is working*/
  }
}

【讨论】：