Html 为什么我的 CSS 媒体查询被忽略或覆盖？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10815651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my CSS media query being ignored or overridden?
提问by MSchumacher
This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). It's my NAVIGATION menu that I'm struggling with. (I use max-width btw)
这让我发疯！我查看了 Stackoverflow 上的一些问题，发现 ID 元素优先于类元素（知道这一点很好，但我觉得这不是我的问题）。这是我正在努力解决的导航菜单。（顺便说一句，我使用最大宽度）
Here is the GENERAL CSS for my NAV:
这是我的 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; }
Now when the Viewport is UNDER 1140px, I want the CSS to change the menu like so:
现在，当视口低于 1140 像素时，我希望 CSS 像这样更改菜单：
nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
So basically the menu will float left with less top padding.
所以基本上菜单会向左浮动，顶部填充较少。
When the Viewport is UNDER 800px, I want the CSS to change the menu like so:
当视口低于 800px 时，我希望 CSS 像这样更改菜单：
nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}
As you can see I've I only changed the NAV Float to NONE
如您所见，我只将 NAV Float 更改为 NONE
Now when I test it, the GENERAL CSS works fine as well as when the view port under 1140px, but as soon as I go under 800px, the NAV still floats to the left!!?? It seems to be inheriting the CSS media query of 1140px? Any ideas?
现在当我测试它时，GENERAL CSS 和 1140 像素以下的视口一样工作正常，但是一旦我低于 800 像素，NAV 仍然向左浮动！？？好像是继承了1140px的CSS媒体查询？有任何想法吗？
UPDATE: This is how I am defining my media queries
更新：这就是我定义媒体查询的方式
<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" />
回答by Per Salbark
Maybe there is something not right with your media queries? Try something like this:
也许您的媒体查询有问题？尝试这样的事情：
@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 { }
}
回答by Saurabh Kumar
Here is the jsFiddle for your test cases.. http://jsfiddle.net/RJm3c/1/
这是您的测试用例的 jsFiddle .. http://jsfiddle.net/RJm3c/1/
http://jsfiddle.net/RJm3c/1/embedded/result/<-- resize your browser to see the result
http://jsfiddle.net/RJm3c/1/embedded/result/<-- 调整浏览器大小以查看结果
css:
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}
}
?
?
回答by Adrian Fowler
I had a similar problem, I placed all my @media queries into a seperate stylesheet called 'responsive', and it wal all working fine until I started importing the new responsive CSS and elements into my existing website.
我遇到了类似的问题，我将所有 @media 查询放入一个名为“响应式”的单独样式表中，并且在我开始将新的响应式 CSS 和元素导入现有网站之前，一切正常。
I had to start adding !important to just about every line of CSS contained within the @media query. I then change the loading order of my CSS files, and moved the one called 'responsive' down the list to be the last one loaded, and then everything started to work fine and I no longer needed to use the !important statement after the lines of CSS.
我不得不开始将 !important 添加到@media 查询中包含的几乎每一行 CSS。然后我更改了我的 CSS 文件的加载顺序，并将名为“responsive”的文件从列表中移到最后一个加载，然后一切开始正常工作，我不再需要在行后使用 !important 语句的CSS。
