cssのメディアクエリがよくわかりません。

Question

##現状・問題点

初心者です。
レスポンシブページの修正をしています。
ページ内には画像や文章、cssで吹き出しを作成して表示している箇所があります。
画像や文章は可変しますが、吹き出し部分と画像の位置が、iPhone5～7それぞれのバージョン？によって異なります。

iPhone6と6Plusではきれいに修正し、iPhone5用でも記述しても
iPhone6の方を読み込む、もしくは逆（5の記述を6の時に読み込んでしまう、など）が発生します。

###前提・実現したいこと
0からレスポンシブサイトをコーディングしたことがないのですが、
iPhone5、6、6Plus、7、など、画面サイズが異なるデバイスの場合でも
きれいにレイアウトしたいです。
cssの記述はそれぞれのバージョンで記載はしてあるので、
メディアクエリだけ効くようにしたいです。

###該当のソースコード

iPhone5の時
@media(min-width: 320px) and (max-device-width:568px) {}

iPhone6の時
@media screen and (max-width: 667px) {}

iPhone6Plusの時
@media(min-width: 414px) and (max-device-width:736px) {}

上記は検索して試して効いたものです。

viewportは下記で設定しています。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

###確認方法
iPhone5、6、7
PCのChromeでの開発者ツール

Comments

[T_sa]

iPhoneのバージョンごとのメディアクエリを検索したとありますが、具体的にはどこを検索したのでしょうか？

[m0nta]

ネットで「メディアクエリ 書き方」などで検索し、バージョン毎に紹介されているサイトの記述を試しました。

Answer 1

メディアクエリの指定にmax-widthとmax-device-widthなどが混在していますが、この2つは明確に異なります。
具体的に参照したページが不明ですが、理解して使うことが大事かと。
mediaQuery における max-width, max-device-width の違い

また、そもそもその指定が異なっているようですのでこちらで再度試してみてください。

■ iPhone 5
@media only screen and (min-device-width:320px) and (max-device-width:568px) {
  //CSS記述
}

■ iPhone 6
@media only screen and (min-device-width:375px) and (max-device-width:667px) {
  //CSS記述
}

■ iPhone 6 Plus
@media only screen and (min-device-width:414px) and (max-device-width:736px) {
  //CSS記述
}

ＣＳＳデバイス別サイズ
Screen Sizes

Comments

[m0nta]

ご回答頂きありがとうございます。
早速試してみましたが、iPhone５の方を修正したところ、iPhone６の方が５のcssを読み込んでしまい、若干ズレが生じてしまいました。
やはり、範囲が重なっていると読み込んでしまうものなのでしょうか。。

[T_sa]

iPhone5の記述後にiPhone6のずれた箇所を修正してはどうでしょう？
メディアクエリは明確にバージョンを分けてスタイルを当てる機能ではありませんので、cssの記述順の上書きを意図的に使って修正する必要があります。
（根本を言うと、多少画面幅が違っても同じようにみえるデザインにするのが望ましいのですが……）

[m0nta]

ご回答ありがとうございます。
イメージ的には下記のようなイメージでしょうか？

iPhone5のcss
.sample {

iPhone6のcss
.sample {

です。

[T_sa]

そうなります。
例えば、iphone5のみでbackground-colorを指定したい場合、iphone6やiphone7でもbackground-colorが指定されてしまうので打ち消すような記述が必要となります。

[T_sa]

打ち消すような記述方法は本来良くないのですが、機種ごとにスタイルを変えるという（本来的には無謀な）要件を達成するための方法とお考えください…。

[m0nta]

なんとか出来ました！！ありがとうございます；；

[T_sa]

よかったです！ 解決した場合BA選択していただいて質問を解決済みにするとよいかと思います。良ければお願いします。