我使用以下媒体查询在全屏模式下应用我的 CSS 覆盖:
@media (device-width: 100vw) and (device-height: 100vh) {
.content {
padding: 0px !important;
}
}
In 在 Firefox 中完美运行,但在 Chrome 中非常不可靠(Windows 7 x64 上的两个最新版本)。我可以尝试仅在不处于全屏模式但需要反转查询时应用我的覆盖。所以我的问题是:
- Chrome 应该支持查询吗?
- 如何取反(逻辑非)?
附注
我的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/