我正在尝试在 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 文件有效,但所有媒体查询都无效...
最佳答案
参见 the cascading order .
Sort according to importance (normal or important)
两条规则都正常
and origin
都是作者规则
Sort rules with the same importance and origin by specificity of selector
body
和 body
是相同的选择器,因此具有相同的特异性。
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
background-color: #fcfcfc;
规则出现在 background-color: blue;
之后,因此它会覆盖它。
顺序很重要。颠倒规则的顺序。
(您还有一个额外的 }
会导致语法错误。将其删除。)
body {
background-color: #fcfcfc;
}
@media screen and (max-width: 480px) {
body {
background-color: blue;
}
}
关于html - 为什么 css3 媒体查询不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44564471/