CSS @media display NOT in 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*/
  }
}

密碼筆

Answer 1

你非常接近這一點，你只需要將not轉向乞討。

根據 MDN 的文檔：

反轉查詢的含義

not 關鍵字反轉了整個媒體查詢的含義。 它只會否定它所應用的特定媒體查詢。 （因此，它不適用於以逗號分隔的媒體查詢列表中的每個媒體查詢。） not 關鍵字不能用於否定單個特征查詢，只能用於否定整個媒體查詢。 在以下查詢中最后評估 not：

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