ipadプロとラップトップのメディアクエリ

Question

iPad Proといくつかのラップトップのメディアクエリを処理する正しい方法は何ですか？

通常、これはiPadプロのために(min-device-width: 1024px) and (max-device-width: 1366px)となります。しかし、Chromeの開発ツールを使用すると、1280x800pxや1440x900pxなどのラップトップ画面サイズがあることがわかります。

私が直面している問題は、これらの画面サイズが重なっていることです。 このような問題を解決するための「標準的な」方法はありますか？

Answer 1

これを処理する「標準的な」方法は、デバイス固有のメディアクエリを使用しないことです。

https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/

EDIT：は、あなたは、このように任意の重複を避け、min-widthを使用せずにのみmax-widthをどのように使用できるかを示す下のスニペットを追加しました。

div { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: grey; 
 
} 
 
@media screen and (max-width: 780px){ 
 
\t div { 
 
\t \t \t background-color: green; 
 
\t } 
 
} 
 
@media screen and (max-width: 480px){ 
 
\t div { 
 
\t \t \t background-color: blue; 
 
\t } 
 
} 
 
@media screen and (max-width: 300px){ 
 
\t div { 
 
\t \t \t background-color: yellow; 
 
\t } 
 
}

<div></div>