【レスポンシブ対応】マルチデバイスに向けた必要なメディアクエリ数について、ご教示いただきたいです。

Question

【現状、設定しているメディアクエリ数：４つ】
@media screen and (min-width: 1128px)
@media screen and (min-width: 744px) and (max-width: 1127px)
@media screen and (max-width: 1127px)
@media screen and (max-width: 743px)

この場合、PCブラウザでは3つのブレイクポイントで、
整ったレイアウトができています。

この状態から、さらにタブレット、スマホに最適化されたレイアウトをつくりたい場合、

例えば、
iPad：768px幅で最適化されたメディアクエリをつくる
iPhoneX:375幅で最適化されたメディアクエリをつくる
の２つを新たに制作すれば、レスポンシブ対応と呼べるでしょうか？

Answer 1

細かい方が良いと思いますが、クラウドソーシングサイトで良く見かけるサイズはスマホ用、タブレット用、PC用の３サイズを良く見かけます。

僕は
スマホはiPhone5iPhoneXS MAXまでのメディアクエリ 320px ~ 420px bodyにwidth:93%
タブレットIPadiPadProまでのメディアクエリ 768px ~ 1024px bodyにwidth:95%
pcはタブレット以上~1200px(ここは柔軟に対応) bodyにwidth:1200px
みたいな感じでコーディングをしていまして、
できるだけblock要素(imgはインラインですがimgも含む)には%で文字は
calcで16px以上で表示されるようrem指定にしています。

Comments

[Yuji17]

ご回答いただき、ありがとうございます！
初心者の私にとっては貴重な実務的なお話まで、ありがとうございます。
可能であれば教えて頂きたいのですが、「320px ~ 420px bodyにwidth:93%」等の部分の、
widthに93%指定している意図は何なのでしょうか？

[taiyakix]

block要素は親要素の93%の幅に指定しているという意味だと思います

[hirokuro900]

説明不足ですみません！
「320px ~ 420px bodyにwidth:93%」とゆうのは
まずメディアクエリを記入いたしまして
//スマートフォンサイズ
@media screen and (max-width: 420px) {
body {
width : 93%; //93~96%(クライアントの要望に合わせますが僕の基本数値にしています)
margin: auto; //margin: 0 auto;と同じ意味で中央寄せしています。
}}

とゆう意味でした。widthの幅は臨機応変に上品なサイトなら余白多めに91%
にぎやかなサイトでは余白を少なめに96%
の様な感じで指定しています。

//タブレットサイズ
@media screen and (max-width: 1024px) and (min-width: 421px)
body {
width : 95%; //95~97%
margin: auto;
}}

これで細かくiPhoneXS MAXではキレイなのに、iPhone5では崩れるなどの問題が発生しにくくなりました。

[Yuji17]

いえいえ、ご丁寧にありがとうございます！
この部分について理解が深まりました。

Answer 2

そりゃあ細かければ細かい方がいいのでしょうが。それぐらいでいいと思います。
蛇足かもしれませんが、個人的にメディアクエリの指定よりも,vw,vhの指定の方がいいとおもっています。

Comments

[Yuji17]

ご回答いただき、ありがとうございます！
そうなのですね。
例えば、iphone以外のスマホ等まで細かくメディアクエリを書かなければならないのかと、首を傾げておりました。
「vwとvh」について、少し調べてみました。
スクリーン幅に応じて自動変化してくれるのであれば、レスポンシブ対応をする場合は、可能な限り全て、
「vwとvh」で記載して方がいいのですね。
勉強になりました。ありがとうございました！

[taiyakix]

もしよければベストアンサーお願いします