为什么CSS3媒体查询不起作用？
[英]why css3 media query doesn't work?
问题描述
我正在尝试在css3中使用媒体查询来使我的网站具有响应性，似乎我做得很好，但是它不起作用，这是我的代码：
@media screen and (max-width: 480px) {
body{
background-color: blue;
}
}
}
body {
background-color: #fcfcfc;
}
和标题：
<link rel="stylesheet" type="text/css" href="style.css">
css文件可以工作，但是所有媒体查询都不能...
6 个解决方案
解决方案1
1 2017-06-15 10:00:55
请参阅级联顺序 。
按重要性排序（正常或重要）
这两个规则都是正常的
和起源
两者都是作者规则
通过选择器的特异性对具有相同重要性和起源的规则进行排序
body和body是标识选择器。
最后，按指定的顺序排序：如果两个声明的权重，来源和特异性相同，则以后者为准。
background-color: #fcfcfc; 规则位于background-color: blue; 因此它会覆盖它。
顺序很重要。 颠倒规则的顺序。
（您还有一个额外的} ，这会导致语法错误。将其删除。）
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}
解决方案2
0 2017-06-15 10:00:23
下面的代码应该工作。
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body{
background-color: blue;
}
}
解决方案3
0 已采纳 2017-06-15 10:01:32
CSS样式有很多优先事项，顺序是其中之一。 另外，还有一个} 。
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}
和标题
<link rel="stylesheet" type="text/css" href="style.css">
解决方案4
0 2017-06-15 10:02:09
您的结束标记过多，必须在常规样式后运行媒体查询。 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
Quentin正确详细地说明了它不起作用的原因。 这是因为顺序在CSS中很重要。
如果您说要在CSS文件中为同一元素设置两次属性，那么将应用后面的属性。 所以如果有的话
@media (max-width: 480px) {
body { background-color: white; }
}
body { background-color: red; }
在同一文件中， body标签将继承red背景色（即使屏幕尺寸<480px）。 仅在媒体查询之后放置即可解决问题。
我在媒体查询中使用的另一种解决方法是包括!important规则。 因此，在以下情况下，对于小于480像素的屏幕， body标签将具有white背景色，否则将具有red背景色。
@media (max-width: 480px) {
body { background-color: white !important; }
}
body { background-color: red; }
因此，当涉及到媒体查询时，我发现使用!important规则强制执行该属性很有用，这样我就不必担心顺序，因为稍后通常会添加媒体查询。 但这不是一个好习惯，因此请谨慎使用，因为这会使进一步调试变得困难。
另外，删除该多余的大括号} ！
解决方案6
0 2017-06-15 10:45:06
我认为您没有添加元视口标签，请检查您的HTML文件。
<meta name="viewport" content="width=device-width, initial-scale=1">
我的CSS中只有两个媒体查询断点可以工作。.为什么其余的也不能工作？
[英]Only two media query breakpoints in my css work..why doesn't the rest also work?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.