名古屋のホームページ制作なら

こんにちは(‘ω’)
デザイナーの松田です！！

最近梅雨が近づいてきたのか、
雨が多いですね。。。
月曜日も台風がやってくるみたいなので、
時間に余裕を持って行動したいと思います。

さて、今回ですが、
普段サイトを作る際、レスポンシブ対応を行うのが
一般的となってきました。

レスポンシブデザインをする際に、
ブレークポイントを設定しますが、
今までだと、下記の3通りで設定されているところが多いかと思います。
・タブレットの横（1024px）
・タブレットの縦（768px）
・一般的なスマホの縦（640px以下）

しかし、タイトルにも書きましたが、
「iPhoneX」が出てきたおかげで、これが変わってきました。
かくいう僕も数カ月前に知ったのですが。。。

みなさん、iPhoneXの横幅って何pxかご存知ですか？

縦は今までと変わらず、375pxなのですが、
横が812pxもあります。

ここで気付いた方もいらっしゃるかと思いますが、
実はiPadの縦幅より、iPhoneXの横幅のほうが大きいんです。

タブレットの縦からレスポンシブを始めている場合、
iPhoneXの横表示で見ると、PC版を見ていることになります。

さあこの記事を見てしまったそこのあなた！！！！！！
今日からレスポンシブは「1024px」「812px」「640px」の
3パターンにしましょう！！！！！！！！！！！