特定媒体查询未覆盖?

时间:2017-07-25 20:08:20

标签: css resize media-queries

所以我想要在750px和500px更改元素:

.footer-logo img {
 content:url(...);
 }

然后:

@media only screen and (max-width: 700px) {
.footer-logo img{
margin-top: -58px !important;
padding:64px;
}
}



@media only screen and (max-width: 500px) {
.footer-logo img {
width: 80vw !important;
max-width:none !important;
margin-top:-10px !important;
}

发生了500px的变化,但是在700px测试时没有发生变化。我知道我不应该使用!非常重要,但如果没有它,造型就不会发生......任何帮助都表示赞赏

1 个答案:

答案 0 :(得分:0)

你可以尝试这个。请检查div颜色变化根据媒体查询
HTML

<div class="footer-logo">
<img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
</div>

CSS

@media only screen and (max-width: 700px) {
.footer-logo > img{
margin-top: -58px !important;
padding:64px;
}

.footer-logo {
  background-color:yellow;
}
}

@media only screen and (max-width: 500px) {
.footer-logo > img {
width: 80px !important;
max-width:none !important;
margin-top:-10px !important;

}
.footer-logo {
  background-color:red;
}

}