미디어 쿼리가 모바일 브라우저 및 Chrome에서 작동하지 않습니다.

Question

CSS 스타일에서 내 웹 사이트의 @media에 문제가 있습니다. 현재 firefox에서 내 웹 페이지를 테스트 할 때 모든 것이 잘 작동합니다. 450px (이것이 멈추기까지 규모를 줄일 수있는 길이라고 생각합니다.) 그러나 Chrome에서 테스트 할 때 화면 크기를 줄이면 미디어 스타일이 호출되지 않는 것 같습니다. 테스트 할 때 안드로이드 브라우저에서 작동하지 않습니다.

아무도 내가 잘못 가고 있다고 말할 수 있습니까? 웹 URL은 (now.hidden - 질문의 답변으로 인해) 여기에 CSS의 일부 코드가 드롭됩니다. 시도하고 페이지가 작동하도록 다른 것들을 가지고 놀고있는 미디어 너비를 무시하십시오.

오 - 나는 또한 - 웹킷 - 분 - 픽셀 - 배급을 사용하여 시도했다 : 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; } 



} 

당신은 .center-fold 규칙에 대한 닫는 중괄호를 잃은

Answer 1

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

에게 있습니다.