媒體查詢，不適用於移動瀏覽器和Chrome

Question

我在CSS樣式中遇到了我的網站的@media問題，目前當我在fire fox中測試我的網頁時，一切正常，即使縮小到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規則的右括號。