レスポンシブデザイン

質問

スマホとＰＣで同一ＵＲＬにして
レスポンシブデザインでｃｓｓを変えたいのですが
それぞれどのサイズにすればいいのでしょうか？

現在は
@media screen and (max-width: 499px) {
* {
font-size: 1.0em;
}
}

@media screen and (min-width: 500px) {
* {
font-size: 2.0em;
}
}
の様にしていて
５００以上だと大きく表示されるようにしています。

私のスマホ（アンドロイド）・ＰＣなら問題ないのですが
一般的な幅を教えてください。

回答No.1

Katsu_Kaiz · ベストアンサー

一般的には、下記のような解像度（幅）になります。
　iPhoneSE……320px
　Android……360px
　iPhone6/7……375px
　iPhone6/7 Plus……414px
　iPad……768px
　ノートパソコン……1366px
　デスクトップパソコン……1920px

スマホとパソコンでCSSを分けるのであれば、
　@media screen and (max-width: 767px) {}
　@media screen and (min-width: 768px) {}

iPadの768pxが無難かなと思います。この書き方だと、iPadからはパソコン用のCSSになります。あるいはiPadよりも小さいタブレットにあわせて、600pxという数字も考えられます。

参考URL：

https://allabout.co.jp/gm/gc/454493/

お礼

ありがとうございます。