981 views

この記事は最終更新から 1954日 が経過しています。

1. 悩ましいこと

レスポンシブデザインでホームページを作成するとき、
画面の横幅に応じたレイアウト調整を CSSに記述する。

でも、世の中にはいろいろな画面サイズのデバイスが存在する。
単純にパソコン/スマホの二択ではすまない。

多くの場合に両者の分岐点とされている 767px について見ると、
768pxのパソコン用表示レイアウトはイマイチ窮屈に見え、
767pxのスマホ用表示レイアウトはイマイチ間抜けに見えたりする。

そんなことを考えると、二分割ではなく、三分割の方がよいのか、
いや、四分割がよいのかと、キリがない。

2. 情報収集

世の中に出回っているデバイスの画面サイズについて情報取集してみたい。

まずはこちら、丁寧にまとめてくださっている。 m(_ _)m
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
MATERIAL DESIGN DEVICE METRICS

こちらを参考にすると、気になる主な分岐点は以下の通り。
・768px : iPad, iPad mini
・600px : Nexus 7
・540px : Xperia C4/Z Ultra
・414px : iPhone6 Plus
・411px : Google Pixel, Nexus 5x/6/6P
・375px : iPhone 6
・360px : Nexus 5, Galaxy S5/S6/S7/S8, Xperia Z1/Z2/Z3
・320px : iPhone, iPhone 4/5

3. 【本題】@mediaでどう分ける？

むむむむ…
わからない…

1000px辺りで一回分けた方がよいようにも感じている。
400 ～ 500px辺りでも一回分けた方がよいようにも感じている。

細かく作り込む手間は省きたいが、違和感のあるレイアウトは避けたい。

どうしようか…