Question

这让我疯了！我在Stackoverflow上看了几个问题，看到一个ID元素优先于一个类元素（这很好知道，但我觉得这不是我的问题）。这是我的NAVIGATION菜单，我正在努力。（我使用max-width btw）

这是我的资产净值的GENERAL 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低于1140px时，我希望CSS改变菜单：

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

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

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

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

如你所见，我只是将NAV Float改为NONE

现在当我测试它时，GENERAL 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" />

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

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

http://jsfiddle.net/RJm3c/1/embedded/result/＆lt; - 调整浏览器大小以查看结果

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

Answer 3

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

我必须开始添加！对@media查询中包含的每一行CSS都很重要。然后我更改了我的CSS文件的加载顺序，并移动了一个名为“响应”的文件。在列表中加载最后一个，然后一切都开始正常工作，我不再需要在CSS行之后使用！important语句。

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

3 个答案: