Chrome Android 只考虑一个媒体查询

Posted 2023-03-06

【中文标题】Chrome Android 只考虑一个媒体查询

【英文标题】：Chrome Android considers only one media query

【发布时间】：2017-11-16 21:21:42

【问题描述】：

实际上，我在 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 不喜欢有两个相同的查询......它不是很优雅，但它可以工作。

【问题讨论】：

“我不知道为什么”..我解释了原因，但如果你不接受建议，你显然会很难学..看看媒体查询在任何网页的源代码中，您都会看到它们的样式符合我的建议。学习愉快！

您解释了如何设置媒体查询的样式，对此我表示感谢。现在我的问题是为什么它不能在 Chrome Android 上运行，你没有回答的问题。所以请冷静下来，不要再看不起我了。

【参考方案1】：

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

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

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