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

一尘不染

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

css

这让我发疯！我看了一些关于Stackoverflow的问题，发现ID元素的优先级高于类元素（这很高兴知道，但是我感觉这不是我的问题）。这是我苦苦挣扎的NAVIGATION菜单。（我使用最大宽度顺便说一句）

这是我的资产净值的一般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; }

现在，当视口小于1140px时，我希望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

现在，当我对其进行测试时，一般CSS以及在视口低于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" />

阅读 601

2020-05-16

共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 { }
}

2020-05-16