Chrome Android 只考虑一个媒体查询

Question

实际上，我在 Chrome Android 上遇到了媒体查询问题。 我有一个文件（mobile.css），其中包含页眉和页脚的移动设计。该文件在每个页面中都导入，其中的媒体查询如下：

@media screen and (max-width: 980px) {
    /* some code */
}

然后，我网站的每个页面都有其适当的 css 文件，其中包含与该页面相关的移动设计，媒体查询与 mobile.css 文件中的相同。

此代码在桌面版 Chrome 和 Firefox 以及 Firefox Android 上运行良好，但在 Chrome Android 上根本无法运行，我不知道为什么。

更新

我将其中一个媒体查询更改为：

@media screen and (max-width: 981px) {
    /* some code */
}

它有效。显然 Chrome Android 不喜欢有两个相同的查询......它不是很优雅，但它可以工作。

Answer 1

我将其中一个媒体查询更改为：

@media screen and (max-width: 981px) {
    /* some code */
}

它有效。显然 Chrome Android 不喜欢有两个相同的查询......它不是很优雅，但它可以工作。