レスポンシブWebデザイン:画面サイズ

レスポンシブなイメージ

レスポンシブWebデザインをするにあたり、各デバイスのサイズを抑えておく。

主なデバイスの画面サイズ

別にAndroidがキライな訳ではないけど、分かりやすいのでiPhoneを例にする。

デバイスの画面サイズ(小さい順)
デバイス サイズ(横幅)
iPhone(縦向き) 320px
iPhone(横向き) 480px
iPad(縦向き) 768px
iPad(横向き) 1,024px

※ iPhone6、iPad Proを除く

レスポンシブサイトを作る時に対応すべきサイズは?

人それぞれだと思うけど、2016年4月現在、私の場合は以下の通り。

レスポンシブサイトを作る時のサイズ設定
viewport設定 サイズ設定
540px以下 1オブジェクトの最大固定横幅320px以下(余白含む)
768px以下 1オブジェクトの最大固定横幅540px以下(余白含む)
その他 1オブジェクトの最大固定横幅768px以下(余白含む)

上記のサイズ設定はあくまで「固定」時のみ。
基本的には固定で設定せず、間接的に設定する。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です