つい先日、ようやく重い腰を上げてブログのテーマをレスポンシブ化しました。メディアクエリの書き方とか覚えてなかったから10時間くらい掛かったよ。死ぬかと思ったよ。
レスポンシブレイアウトを実装するにあたって、初心者のLeo(@Akamaru12mg)が特に念入りに調べたのはブレイクポイントについてでした。
レスポンシブデザインにおいて、スタイルを切り替える際の境目となるポイント
「ブレイクポイントって何pxくらいにするのが良いのかなぁ～」と色々調べたんですが、どこを見ても似たような事が書いてあって…
大体こんな感じでした。調べた中で多そうなのは480px・768px・960pxあたりです。
新規でテーマを作るんじゃなく、既存のテーマのレスポンシブ化に取り組んだため、予めブレイクポイントを決めて組み直していくのはマジで作りづらかった。あーここ768pxで切り替えると横の余白が広すぎてダサいわーみたいな。
で、色々試してみて気付いたんです。ブレイクポイントなんて適当でいいんじゃねーかと。
Web屋じゃないので詳しいことは言えない（というか知らない）ですが、レスポンシブデザインってユーザーがどの端末・解像度で見てもコンテンツが綺麗に表示される事を目的にして編み出された手法ですよね？ついでにPC/モバイルで別々のテーマを用意するよりもメンテナンスに掛かる時間が削減できるというオマケ付き。
つまり、シェアの高い端末に合わせる～とかではなく、コンテンツがしっかり表示されるように適宜ブレイクポイントを設定していくという考え方のほうが正しいレスポンシブデザインに近づくんじゃねーかと思ったわけです。
端末や解像度のシェアなんて年々変わっていくわけですし、特定の端末に合わせるために無理にレイアウトを組み直したりするのは本末転倒な気がします。
うちのブログのブレイクポイントは3箇所です。
深いことは考えずに適当に決めましたが、Chromeの開発者ツールで見た限り、どの解像度で見ても破綻はしていません。もっと細かく作ったほうが良いのかもしれませんが、これがLeo(@Akamaru12mg)の限界です。燃え尽きた。
