css - 全屏媒体查询

Question

我使用以下媒体查询在全屏模式下应用我的 CSS 覆盖:

@media (device-width: 100vw) and (device-height: 100vh) {
  .content {
    padding: 0px !important;
  }
}

In 在 Firefox 中完美运行，但在 Chrome 中非常不可靠(Windows 7 x64 上的两个最新版本)。我可以尝试仅在不处于全屏模式但需要反转查询时应用我的覆盖。所以我的问题是:

1. Chrome 应该支持查询吗？
2. 如何取反(逻辑非)？

附注

我的viewport声明如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Answer 1

使用新的 css 特性 display-mode

@media all and (display-mode: fullscreen) {
  .content {
    padding: 0px;
  }
}

同时避免使用 !important 因为它是 bad practice

您可以使用not 否定@media 规则。可以找到有关此的详细信息here .