小さいサイズのメディアクエリが機能しない

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がカスケード接続されているので、あなたが（最高から最低まで順にクエリを配置する必要があり、その最新のルールが優先されますを使用して最初のものですが、あなたはそれを後方に持っています。