CSS @media 显示 NOT FULLSCREEN 不起作用？

Question

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

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

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

codepen

Answer 1

你已经很接近了，你只需要将 not 移到开头。

根据 MDN 的文档：

Inverting a query's meaning

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

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