为什么我的CSS媒体查询被忽略或覆盖？ （tumblr）

Question

这是我的CSS：

@media screen and (max-width: 640px){
.double{width:260px;}
.double img{width:100%;height:auto;}
.title {font-size:50px;}
}

无论我编辑@media screen and (max-width: 640px)属性多少，都无效。我也试过添加!important，但它不起作用。

似乎我的@media属性被忽略/覆盖，因为当我调整浏览器大小并检查元素（在FireFox上）时，使用的CSS仍然是.double img{width:560px;}，它应该是{{1} }}

任何帮助都会非常感激！ ：）

Here's my Tumblr. 如果有帮助，我的JSFiddle是here。

Answer 1

这只是由.capz类中的语法错误引起的，在媒体查询之前是juste：

.capz {
     opacity:0;
    filter:alpha(opacity = 0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    background: rgba(255,255,255; //missing closing parenthesis
    width: 100%;
    height: 100%;
    bottom:3px;
}

@media screen and (max-width: 640px){
    .double{width:260px;!important}
    .double img{width:100%!important;height:auto !important;}
    img {max-width: 100% !important;height: auto !important;}
}

（注意：在这种情况下，您不再需要!important标记）

Updated fiddle