css - 为什么我的 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; }

现在，当视口(viewport)低于 1140 像素时，我希望 CSS 像这样更改菜单:

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

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

当视口(viewport)低于 800 像素时，我希望 CSS 像这样更改菜单:

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

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

现在当我测试它时，GENERAL CSS 工作正常，当视口(viewport)低于 1140px 时也能正常工作，但是当我低于 800px 时，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 { }
}