8

这快把我逼疯了！我在 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" />
4

3 回答 3

9

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

@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 { }
}
于 2012-05-30T12:16:57.563 回答
3

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

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

于 2015-03-20T15:26:38.527 回答
1

这是您的测试用例的 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}
  }

​</p>

于 2012-05-30T12:36:49.247 回答