Question

我在CSS样式的网站@media中遇到问题，目前当我在火狐中测试我的网页时一切正常，即使缩小到450px（我认为这是我可以缩小的范围）在它停止之前）。然而，当在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规则的右大括号。

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

1 个答案: