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

Question

ありがとうございました。私はデザインを強化するために使用しているカスタムCSSがあります。私はこの問題に取り組んでいます。あるメディアクエリで何かを変更すると、iphone 6のことを言うと、その変更は別のデバイスに影響します。iphone 5と言うと、この問題になるのはいつも終わりのない状態です。ここに私が使用している私の@mediaのブレークポイントがあります。

/* IPHONE 6 PLUS */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

} 

/* IPHONE 6 */ 
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 

} 
/* IPHONE 5s */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

} 

/* IPAD LAYOUTS */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    } 


/* IPAD LANDSCAPE */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

どのようなヘルプも非常に訴えるでしょう。

Answer 1

私はバードマンに同意する、とあなたは、モバイル最初のアプローチを検討すべきです。しかし、モバイルは、まず、最小のデバイスサイズが完全にメディアクエリの外にあることを意味します。次のサイズアップにより、最初のメディアクエリが開始されます。これらの新しいスタイルは基本スタイルに加えて上書きされないため、最小幅しか必要ありません。作成された各メディアクエリは、既に呼び出されたものと結合し続けます。

、代わりにあなたのデザイン要素が悪く見えるように起動したときに心配... iPadの本、またはタブレットを心配します。主要なブラウザはすべて、さまざまなデバイスサイズでテストするためにインテリジェントなエミュレータを備えています。

ここに賛否両論の良い記事があります。私はいつも、コードの最初のモバイル、決して私は意図的にそれを行う場合を除き、スタイルが衝突を心配:)

https://codemyviews.com/blog/mobilefirst

Answer 2

デバイス幅は、メディアクエリの範囲の間にある場合に、スタイリングが適用されます。したがって、デバイスの幅が500pxの場合、最初に6plusのスタイリングが適用され、その後6sのスタイリングによってオーバーライドされ、次に5s 'がオーバーライドされます。通常は、特定のデバイスに合わせてCSSを調整することはお勧めしませんが、そうしたい場合は、範囲が重複しないようにするか、最後にスタイルが適用された場合でもオーバーライドする必要があります。