css - メディア クエリの競合

Question

サイトを 2 台のデバイスでレスポンシブにしようとしています

1. Samsung タブ (600 x 1024)
2. iPad (768×1024)

以下のメディアクエリを使用

@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : portrait){  }

と

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){  }

しかし、Samsung Tab で自分のサイトを開いているときに、iPad のメディア クエリ スタイルが適用されます。

これには何ができますか？

Answer 1

おそらく、メディア クエリの重複を避けたいと思うでしょう。どのデバイスかではなく、どの画面サイズで考えてください。次のように、1 つは 600 ～ 767 ピクセル、もう 1 つは 768 ～ 1024 ピクセルをターゲットにします。

縦向きの Samsung タブ

@media only screen and (min-device-width : 600px) and (max-device-width : 767px)

横向きのSamsung TabとどちらかのiPad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)