スタッフブログ

iPhoneXの登場によるレスポンシブの変遷

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

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

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

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

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

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

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

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

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

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

スタッフブログ|2018年06月08日

ホームページ運用相談作成依頼はこちらから

0120-982-419

メールマガジン会員募集- E-mail magazine -

ラクーからのメールマガジンの会員を募集しております。
ホームページに関する最新情報や、IT業界の先進事例などを定期的に送信いたします。
ご登録は下記のフォームにメールアドレスを入力して送信するだけとなります。


PAGE TOP