当屏幕尺寸小于 300 像素时,我想更改我网站上一张图片的边距。 但是,当我调整窗口大小时,我的代码似乎不起作用。这适用于相同的窗口大小:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1 ,但我的代码没有:
HTML:
<div class="col-md-3">
<img class="img-responsive" id="logo" src="img/logo.png">
</div>
CSS:
#logo {
margin-top: -25px;
margin-left: 50px;
}
@media screen and (max-width: 300px) {
#logo {
margin-top: 0px;
margin-left: 0px;
}
}
我搞砸了什么?我还是个新手,尤其是在媒体查询方面。
最佳答案
请注意,您为分辨率低于 300 的屏幕编写了@media 查询,因此它会在屏幕变为 300 或小于 300 时反射(reflect)出来。
尝试将媒体查询放在更高的位置,例如:
@media screen and (max-width: 400px) {
#logo {
margin-top: 0px;
margin-left: 0px;
}
}
关于 Bootstrap 响应图像上的 Css3 媒体规则(边距更改)不起作用。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29882560/