質問: スマホと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なら問題ないのですが 一般的な幅を教えてください。
回答: 一般的には、下記のような解像度(幅)になります。 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という数字も考えられます。