为什么CSS3媒体查询不起作用？
[英]why css3 media query doesn't work?
问题描述
I'm trying to use media query in css3 to make my website responsive, it's seems I did all right but it doesn't work, here's my code: 
我正在尝试在css3中使用媒体查询来使我的网站具有响应性，似乎我做得很好，但是它不起作用，这是我的代码：
@media screen and (max-width: 480px) {
body{
background-color: blue;
}
}
}
body {
background-color: #fcfcfc;
}
and the header: 和标题：
<link rel="stylesheet" type="text/css" href="style.css">
the css file work, but all the media querys doesn't... css文件可以工作，但是所有媒体查询都不能...
6 个解决方案
解决方案1
1 2017-06-15 10:00:55
See the cascading order . 请参阅级联顺序 。
Sort according to importance (normal or important)
Both rules are normal 这两个规则都是正常的
and origin
Both are author rules 两者都是作者规则
Sort rules with the same importance and origin by specificity of selector
body and body are identify selectors. body和body是标识选择器。
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
The background-color: #fcfcfc; background-color: #fcfcfc; rules comes after background-color: blue; 规则位于background-color: blue; so it overwrites it. 因此它会覆盖它。
Order is important. 顺序很重要。 Reverse the order of the rules. 颠倒规则的顺序。
(You also have an extra } which causes a syntax error. Remove it.) （您还有一个额外的} ，这会导致语法错误。将其删除。）
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}
解决方案2
0 2017-06-15 10:00:23
Below code should work. 下面的代码应该工作。
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body{
background-color: blue;
}
}
解决方案3
0 已采纳 2017-06-15 10:01:32
CSS styles are prioritised by many things, order is one of them. CSS样式有很多优先事项，顺序是其中之一。 Also, there was one extra } . 另外，还有一个} 。
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}
and the header 和标题
<link rel="stylesheet" type="text/css" href="style.css">
解决方案4
0 2017-06-15 10:02:09
You have too many closing tags and media queries must run after your general styling. 您的结束标记过多，必须在常规样式后运行媒体查询。 https://jsfiddle.net/o8qcuyzb/ https://jsfiddle.net/o8qcuyzb/
body { background-color: #fcfcfc; } @media screen and (max-width: 480px) { body{ background-color: blue; } }
<body></body>
解决方案5
0 2017-06-15 10:18:59
The reason it does not work is given correctly and in detail by Quentin. Quentin正确详细地说明了它不起作用的原因。 It is because the order is important in CSS. 这是因为顺序在CSS中很重要。
If you say set a property for the same element twice in a CSS file, then one that comes later is applied. 如果您说要在CSS文件中为同一元素设置两次属性，那么将应用后面的属性。 So if you have, 所以如果有的话
@media (max-width: 480px) {
body { background-color: white; }
}
body { background-color: red; }
in the same file, the body tag will inherit the red background-color (even for screen sizes < 480px). 在同一文件中， body标签将继承red背景色（即使屏幕尺寸<480px）。 Just putting the media query after will solve the issue. 仅在媒体查询之后放置即可解决问题。
Another work around I use in media queries is to include the !important rule. 我在媒体查询中使用的另一种解决方法是包括!important规则。 SO, in the following case, body tag will have white background-color for screen sizes < 480px and red background-color otherwise. 因此，在以下情况下，对于小于480像素的屏幕， body标签将具有white背景色，否则将具有red背景色。
@media (max-width: 480px) {
body { background-color: white !important; }
}
body { background-color: red; }
So, when it comes to media queries I find it useful to enforce the property using !important rule so that I don't have to worry about the order, as often the media queries are added later on. 因此，当涉及到媒体查询时，我发现使用!important规则强制执行该属性很有用，这样我就不必担心顺序，因为稍后通常会添加媒体查询。 But it is not a good practice, so use judiciously as it makes further debugging difficult. 但这不是一个好习惯，因此请谨慎使用，因为这会使进一步调试变得困难。
Also, remove that extra closing curly bracket } ! 另外，删除该多余的大括号} ！
解决方案6
0 2017-06-15 10:45:06
我认为您没有添加元视口标签，请检查您的HTML文件。
<meta name="viewport" content="width=device-width, initial-scale=1">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.