所以我有一个元素,我想在 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 测试时不会发生变化。我知道我不应该使用 !important 这么多,但是没有它就不会出现样式......感谢任何帮助
最佳答案
你可以试试这个。请查看 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;
}
}
关于css - 特定的媒体查询没有压倒一切?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45312586/