レスポンシブ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以下（余白含む）

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