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

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;} 而应该是 .double img {width:100%;height:auto;}

任何帮助将不胜感激！ :)

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

Answer 1

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

.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