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

Posted 2023-03-06

【中文标题】为啥我的 CSS 媒体查询被忽略或覆盖？

【英文标题】：Why is my CSS media query being ignored or overridden?为什么我的 CSS 媒体查询被忽略或覆盖？

【发布时间】：2012-06-04 15:37:08

【问题描述】：

这让我发疯了！我在 *** 上查看了一些问题，发现 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" />  

【问题讨论】：

尝试将!important 添加到您的float:none 规则中；尝试在 chrome 开发人员工具或您选择的浏览器中的等效工具中检查元素的活动样式和覆盖。此外，您还没有描述有问题的实际媒体查询。

我是响应式设计和媒体查询的新手。我不确定您对“描述您的实际媒体查询有问题。”是什么意思？上面的 CSS 只是我的媒体查询 css 文件中 CSS 的 sn-ps。

你可以为你的问题创建一个 jsfiddle 吗？？这对我们回答你很有帮助

媒体查询在你加载css的<link>标签中定义，或者在css文件中的@include规则中定义。您只提示您使用max-width，但您的问题中缺少您使用的实际查询。不过，我相信其他具有更高特异性的规则更有可能覆盖您的 float 规则。

媒体查询是 CSS 中描述何时使用不同类的先决条件的部分。如：“当宽度css3.info/preview/media-queries

【参考方案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  

【讨论】：

当您对 标签使用查询时，同样的逻辑也适用。您当前的链接的目标宽度都小于 800。确保将最小宽度规则添加到第二个链接。

你看我很确定我的媒体查询是正确的，因为我以前在另一个网站上使用过它们（见我上面的评论“我以前做过一个网站......”）和它工作 100% ......虽然我会摆弄一下你的方法。

【参考方案2】：

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

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

【讨论】：

我已经从这个帖子和另一个帖子中删除了你的签名。请查看help center，尤其是关于自我推销的部分，以及this page。指向您自己网站的链接位于您的个人资料中，而不是您的帖子中。

这篇文章和其他文章的反对票几乎可以肯定是由于垃圾邮件标记对他们投反对票；随着编辑这些可能会停止。如果版主认为适合驳回垃圾邮件标记，则否决票将自动撤消。

这值得一百万个赞。我挣扎了好几个星期。我的问题是所有媒体查询在页面上内联使用它们时都有效 - 问题是当我尝试清理我的代码并将它们放入我的主样式表时......某些选择器工作，其他人没有......甚至带有 !important 标签....没有押韵或理由。然后我根据这篇文章将媒体查询放入他们自己的工作表中，瞧，问题解决了！

【参考方案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
  

​

【讨论】：

嗯...它的作品 100%！我一直在摆弄一段时间，我感觉是我的 Dreamweaver 或我的浏览器给了我错误的结果，因为现在一切似乎都在工作。我现在将对其进行调查并回答我自己的问题以进行澄清

css 属性在文件中从上到下被覆盖...所以即使您更改文件中@media 位置的顺序，您也会得到意想不到的结果！尝试首先定位更宽的屏幕（在您的情况下，首先是 1140 像素，然后是 800 像素）。

太棒了——这是一个学习曲线（响应式设计和媒体查询）。谢谢你的努力，你是个传奇！

@SaurabhKumar 关于从上到下编写属性的出色指导。这解决了媒体查询忽略我设置的特定值的神秘案例。