css - 全屏媒体查询

标签 css google-chrome media-queries fullscreen

我使用以下媒体查询在全屏模式下应用我的 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"/>

最佳答案

使用新的 css 特性 display-mode

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

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

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

关于css - 全屏媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32920967/

相关文章:

user-interface - Google Chrome 使用哪个 GUI 库?

html - 添加左边框时,纯黑色边框会以某种方式消失

javascript - 单击添加按钮绝对没有任何作用,我不知道为什么

javascript - jQuery,动画仅适用于 1 张图像

javascript - 使用 css/javascript 平滑滚动固定 div 在 IE 中给出看似随机的结果

html - 媒体查询不工作 & 最大宽度问题

javascript - AngularJS无法读取未定义的属性 'forEach'

azure - 异常 : Assertion at . ..,条件 '<disabled>' 不满足。这意味着什么?

css - 媒体查询相互覆盖 - 奇怪的情况

css - IE 执行小型设备规则的 css 媒体查询