多个 CSS 媒体查询不起作用答案

【问题标题】：Multiple CSS media queries not working多个 CSS 媒体查询不起作用
【发布时间】：2015-09-06 17:34:22
【问题描述】：

我在 html 中包含两个 css 文件，每个文件都带有 max-width: 480px 的媒体屏幕查询，但是第一个 css 文件加载并且 480px 媒体查询在我的移动屏幕上工作，但第二个带有 480px 媒体查询的 css 文件可以不适用于包含 css 格式的表单。任何帮助将不胜感激。

@media screen and (max-width:480px)

编辑：第一个带有媒体查询的 CSS 文件

@media screen and (max-width:480px){
nav{
  height: 200px;
}

.main-pic{
  display: none;
}

.desc{
  max-width: 100%;
}
}

第二个带有媒体查询的 CSS 文件

@media screen and (max-width:480px){
form, fieldset, #num_content{
    width: 100%;
}

fieldset div{
    width: 100%;
}

.options{
    display: block;
    width: 50px;
}

}

【问题讨论】：

你能发布更多的实际代码吗？媒体查询本身没问题（否则它也不适用于第一个），但是如果我们查看整个代码，我们可能会发现问题。
为什么不将两者结合在一个文件中，并使用一个媒体查询？
一个css文件包含网站的通用格式，另一个css文件包含每个页面具体内容的格式
是否包含这两个文件都没有关系。您可以将代码添加到一个媒体查询中。

标签： css media-queries

【解决方案1】：

原来问题出在 BlackBerry Z10 的浏览器上。出于某种原因，它没有读取第二个 css 文件中的 @media screen，但在我的三星手机上一切正常。

【讨论】：

我只是卡了一会儿，然后我突然想到问题可能出在浏览器本身。当不同的浏览器表现不同时，生活很艰难。