媒体查询，不适用于移动浏览器和 Chrome

Question

我的网站的@media 在 CSS 样式中遇到问题，目前当我在 fire fox 中测试我的网页时，一切正常，即使缩小到 450 像素（我认为这是我可以缩小的范围在它停止之前）。但是，在 Chrome 中进行测试时，似乎在缩小屏幕时没有调用任何媒体样式，因此在测试时它在我的 android 浏览器上不起作用。

谁能告诉我哪里出错了。网址是（now.hidden-由于问题已回答），我将从 css 中删除一些代码。忽略我一直在玩不同的东西来尝试让页面正常工作的媒体宽度。

哦，我也尝试过使用 -webkit-min-pixel-ration:0 但我不太明白它是如何工作的。

这里是 CSS

@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;                   
}

#page { margin-top: -130px;

}



.flex-direction-nav li a.prev {
    background-position: 0 0;
    left: -20px;
    display:none;
}

.flex-direction-nav li a.next {
    background-position: -52px 0;
    right: -21px;
    display:none;
}

nav li a {
        width: 50%;
        border-bottom: 1px solid #fff;
        font: 400 13px/1.4 Georgia, "Times New Roman", Times, serif;
        margin-bottom: 10px;
    }

nav small {

    display:none;

}

.pannels {   max-width:178px;           }

}

@media (max-width: 450px) {

        nav li a {
        width: 50%;
        font: 400 12px/1.4 Georgia, "Times New Roman", Times, serif;
        padding-top: 12px;
        padding-bottom: 12px;
        }

 #underline { margin-top: 33px;

}

.pannels {   max-width:178px;           }

    nav li:nth-child(even) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }



    #content .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }
#tea-image { display:none; }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }


#tea-image { display:none; }



}

Answer 1

@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;
}

您丢失了 .center-fold 规则的右大括号。