Bootstrap 响应图像上的 Css3 媒体规则(边距更改)不起作用。为什么？

Question

当屏幕尺寸小于 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;
    }
}

我搞砸了什么？我还是个新手，尤其是在媒体查询方面。

Answer 1

请注意，您为分辨率低于 300 的屏幕编写了@media 查询，因此它会在屏幕变为 300 或小于 300 时反射(reflect)出来。

find fiddle example

尝试将媒体查询放在更高的位置，例如:

 @media screen and (max-width: 400px) {
   #logo {
    margin-top: 0px;
    margin-left: 0px;
   }
 }