レスポンシブデザインのブレークポイントは悩ましい…ひとまず超シンプルにしました

thikasa

Category: ブログ / Tag: ,

Medium 7535686898

photo credit: Alvaro Rubioc via photopin cc

先日、このブログの WordPress テーマを新しくしました。
その際のポイントのひとつであったのが、レスポンシブデザイン。

スクリーンサイズに合わせて Style を割り当てるわけですが…じゃあいったいどれくらいのスクリーンに合わせればいいのか? というのがとても難しいお話です。


レスポンシブデザインにおけるブレークポイント

どの大きさのスクリーンサイズで Style を切り分けるか。
そのスクリーンサイズのことを「ブレークポイント」と言います。

このブレークポイントなんですが…具体的にどの大きさで? というのがとても難しいようです。

これといった正解は無いみたいですね。

このブログもどうしたものか…悩ましいです。

悩んだ結果超シンプルにした!

現在のテーマの元である Constellation でのブレークポイントの定義はこんな感じ。
BreakPointConstellation

数字の根拠はちょっとわからないです。
どの Style も固定幅のレイアウト。
767px 以下だと、1カラムになります。

で、いろいろ調べてみると、iOS に合わせたこんな感じがいいのかもーと思いました。
BreakPointIOS

でも…Style を4つも用意するのって…いろいろな調整とか修正とか…面倒だなーって(汗

しかし iPhone からのアクセスが多いこのブログ、iPhone に対応した表示にしないといけないのはマストです。

なので!
今回はどどんとシンプルにこうしました。

BreakPointTN

1つだけ!(滝汗

2つの Style はどちらもリキッドレイアウト。
640px 以下で1カラムになります。

どんだけ手抜きなんだよ!とも思ったりしますが、シンプルでこれはこれでいいんではないかと。個人ブログですし。

なおこの「640px」なんですが、Google 先生のオススメの数値です。

A CSS media query we recommend to use for smartphones is:

via Building Smartphone-Optimized Websites – Webmasters — Google Developers

640px 以下はスマートフォンとして扱います、と。
なので無根拠ではないのですよ。

ホント悩ましいレスポンシブデザインのブレークポイント。
このブログでは、当面はこれでいってみようと思います。

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly