メディアクエリが互いにオーバーライドします

Question

メディアクエリに関する一般的な質問があります。私が働いているサイトには、2つの応答ビューポートました：

• 最大幅：414ピクセル（iPhone）と
• のmax-width：770px（アプリ）

スタイルタグがで書かれていますCSSのドキュメントでその順序。彼らはカスケードしているので、私のiPadクエリは私のiPhoneクエリをオーバーライドし続けます（逆もまた同様です）。

これには簡単な解決策がありますか？本当に明白な何かが欠けているようです。

Answer 1

最大幅のメディアクエリを使用する場合、順序は最大から最小まででなければなりません。 min-widthの場合は逆です。

You'll find a detailed explanation of this here.

それは、ネストされたレイアウトですが、それはこのようなものになるはずです：また、CSSが中に含まれていることを確認してなる、iPadのサイズに最小の幅を指定してみてくださいすることができます

@media (max-width: 770px) { 
    .css-rule { 
    } 
} 

@media (max-width: 414px) { 
    .css-rule { 
    } 
} 

を次のようにその幅よりも小さくなることはありません：

@media (min-width: 415px) and (max-width:770px) {} 

外部CSSファイルを読み込んでいる場合、ファイルが上書きされている可能性があります。最も重要な、通常はカスタムCSSファイルをLASTファイルとして配置してください。

メディアクエリではthese guysをチェックしてください。通常、彼らは何が起きているかを知っています。

助けてくれたらお知らせください！