为什么我的 CSS 媒体查询被忽略或覆盖？

Question

这让我发疯了！我在 Stackoverflow 上查看了一些问题，发现 ID 元素优先于类元素（很高兴知道，但我觉得这不是我的问题）。 这是我正在努力解决的导航菜单。 （顺便说一句，我使用最大宽度）

这是我的 NAV 的通用 CSS：

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

现在当视口小于 1140 像素时，我希望 CSS 像这样更改菜单：

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

所以基本上菜单会向左浮动，顶部填充较少。

当视口小于 800 像素时，我希望 CSS 像这样更改菜单：

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

如您所见，我只将 NAV Float 更改为 NONE

现在，当我测试它时，GENERAL CSS 工作正常，当视口低于 1140 像素时，但当我低于 800 像素时，NAV 仍然向左浮动！！？？好像是继承了1140px的CSS媒体查询？ 有什么想法吗？

更新： 这就是我定义媒体查询的方式

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />  

Answer 1

也许您的媒体查询有问题？试试这样的：

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}

Answer 2

我遇到了类似的问题，我将所有@media 查询放入一个名为“响应式”的单独样式表中，并且在我开始将新的响应式 CSS 和元素导入现有网站之前，一切正常。

我不得不开始在@media 查询中包含的几乎每一行 CSS 中添加 !important。然后我更改了 CSS 文件的加载顺序，并将名为“响应式”的文件移到列表中的最后一个加载，然后一切都开始正常工作，我不再需要在行后使用 !important 语句的 CSS。

Answer 3

这是您的测试用例的 jsFiddle。http://jsfiddle.net/RJm3c/1/

http://jsfiddle.net/RJm3c/1/embedded/result/

css：

  nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; text-transform:uppercase;}
  /*for test only*/
  body{ background-color: green}

  @media only screen and (max-width: 1140px), only screen and (max-device-width: 1140px) {
    nav ul li{ float:none;}
    nav a{ float:none; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: red}
  }

  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    nav ul li{ float:left;}
    nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: blue}
  }

​