작은 크기의 미디어 쿼리가 작동하지 않습니다.

Question

페이지의 요소가 1650 픽셀 이상의 화면 크기의 미디어 쿼리에만 응답합니다. 따라서 모바일에서 항목을 응답 할 수 없습니다. 데스크톱에서는 모든 것이 좋지만 태블릿 및 모바일 화면에서는 반응이 없습니다. 아래 코드를 게시하십시오. 어딘가에 오류가 있습니까? 여기 내 미디어 쿼리는 다음과 같습니다

@media only screen and (max-width: 380px) { 
    footer { 
     margin-top: 50px; 
    } 
    .header-image { 
     height: 50px; 
    } 
    #social-icons { 
     display: flex; 
    } 
} 
@media only screen and (max-width: 480px) { 
    .header-image { 
     height: 100px; 
    } 
    #social-icons { 
     display: flex; 
    } 
    .custom-logo { 
     margin-top: 50px; 
    } 
} 
@media only screen and (max-width: 600px) { 
    footer { 
     margin-bottom: 50px; 
     text-align: center; 
     margin: 0 auto; 
    } 
    #social-icons { 
     display: flex; 
    } 
    .textwidget { 
     display: flex; 
     text-align: center; 
    } 
    .widget_text { 
     margin-right: 60px; 
    } 
    .custom-logo { 
     margin: 30px; 
    } 
} 
@media only screen and (max-width: 768px) { 
    .header-image { 
     height: 100px; 
    } 
    .menu-toggle { 
     display: none; 
    } 
    .custom-logo { 
     width: 50%; 
     margin-top: -20px; 
    } 
} 
@media only screen and (max-width: 900px) { 
    .main-navigation ul li a { 
     font-size: 16px; 
     display: none; 
    } 
    .custom-logo { 
     width: 70%; 
     position: relative; 
    } 
} 
@media only screen and (max-width: 1100px) { 
    .main-navigation ul { 
     margin-top: -35px; 
    } 
    .custom-logo { 
     width: 50%; 
     margin-top: -20px; 
     position: relative; 
    } 
} 
@media only screen and (max-width: 1250px) { 
    .custom-logo { 
     margin-left: 30px; 
    } 
} 
@media only screen and (max-width: 1400px) { 
    .custom-logo { 
     margin-top: 50px; 
     width: 50%; 
    } 
} 
@media only screen and (max-width: 1500px) { 
    .custom-logo { 
     margin-left: 100px; 
    } 
} 
@media only screen and (max-width: 1650px) { 
    .custom-logo { 
     margin: 0px; 
    } 
} 
@media only screen and (max-width: 1850px) { 
    .custom-logo { 
     width: 25%; 
    } 
} 

Answer 1

비 모바일 첫 번째 방법 (max-width) CSS는 계단식 때문에 당신은 (가장 낮은에 가장 높은 순으로 쿼리를 둘 필요가 있으므로 최신 규칙이 우선합니다을 사용하여 첫번째 것), 그러나 당신은 거꾸로 가지고 있습니다.