问题描述
我正在尝试放入@media only screen and (max-width: 600px) 但什么也没有发生。 我尝试了一些简单的方法来看看它是否有效,更改了背景但什么也没做。
我需要用 HTML 编写任何东西才能让它工作吗?
**{
Box-sizing: border-Box;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
body{
background-color:yellow;
}**
甚至试图但它在底部但没有...
解决方法
媒体查询必须写在您要进行响应的属性之后。 在这种情况下,首先编写 body 代码,然后编写媒体查询。
这是例子
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
,
添加到此线程的另一个答案中,您可能需要在媒体查询中为正文包含一个重要标签。它必须覆盖上面的主体样式。
所以它应该如下所示:
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue !important;
}
}
以上意味着在宽度LARGER 600px以上的设备上,您的正文的背景色为黄色,正文的背景色为黄色 strong>浅蓝色,适用于宽度SMALLER 小于 600 像素的设备。
,由于 specificity of the rules,您可能看不到更改。
也就是说,你写的方式:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
body {
background-color: yellow;
}
这两者具有相同的特性,这意味着显示的是last规则。
因此,即使您的屏幕尺寸低于 600px
,也会显示 background-color: yellow
。
相反,您应该定义非媒体查询规则first,然后是媒体查询规则second。
试试这个:
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}