メディアクエリCSS3が最大幅で動作しない：420px

Question

私のウェブサイトを反応させ、すべてのサイズを正常に動作させたいのですが、画面が< 420pxの場合、420pxのメディアクエリ992pxの情報？ 問題は、すべてのクラスが420pxで正しく動作しているが、このクラスでは、彼らはデフォルト値がある意味、ベストプラクティスは、「モバイル第一」のサイトを構築することである992px

@media (max-width: 420px) { 
 
    div.test { 
 
    width: 200px; 
 
    } 
 
}

<div class="container test"> 
 
    <img src="img/img.png"> 
 
</div>

Answer 1

max-width:420pxメディアクエリが定義された後に、max-width:992pxメディアクエリを呼び出すようです。 CSSはトップダウンでコンパイルされており、ロジックはこれに対応する必要があります。代わりに、メディアクエリの順序を検討してください：

@media (max-width:992px) { 
    ... 
} 

@media (max-width:420px) { 
    ... 
} 

Answer 2

を取りますモバイル版では、メディアクエリを使用して幅の定義を上書きできます。常に

.test { 
    width: 200px; 
} 
@media screen and (min-width: 992px) { 
    .test { 
    width: 400px; 
    } 
} 

min-widthを使用し、常に小さな解像度で開始し、より大きな解像度で上書き：

あなたは200pxの420pxの幅、および992px幅に400ピクセルをしたいのであれば、あなたのような何かを行う必要があります。