CSS 媒体查询被 Chrome 引擎忽略

Question

我有一个样式表，基本上是这样的：

.mainwindow {
    .popup {
        background: black;
    }
}

@media screen and (max-width: 640px){
    .mainwindow {
       .popup {
            background: red;
        }
    }
}

它在 Firefox、IE 和 Edge 中完美运行，但在 Chrome、Brave 或 Electron 中运行不佳。

是的，我尝试清除浏览器缓存。没用。

更神秘的是，在 Electron 中，红色背景在启动时会闪烁一瞬间，然后变成黑色。

Answer 1

你脑子里有这个吗

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

否则，如果您放大可能会停止响应行为

CSS 媒体查询被 Chrome 引擎忽略

CSS media query ignored by Chrome engines

css

google-chrome

sass

brave