こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

レスポンシブデザイン

スマホとPCで同一URLにして
レスポンシブデザインでcssを変えたいのですが
それぞれどのサイズにすればいいのでしょうか?

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

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

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

投稿日時 - 2016-11-06 10:46:59

QNo.9252237

暇なときに回答ください

質問者が選んだベストアンサー

一般的には、下記のような解像度(幅)になります。
 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/

投稿日時 - 2016-11-06 13:57:56

お礼

ありがとうございます。

投稿日時 - 2016-11-19 10:42:37

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)