【レスポンシブデザイン】デバイスに依存しないブレイクポイントの指定方法

ブレイクポイント

レスポンシブ対応をするうえで、避けて通れない『ブレイクポイント』の設定。一般的には『768px』を基準として、それよりも大きいか小さいかでスタイルを変えることが多いと思います。

でも、これって気持ち悪い気がしていて。もちろんどこかで適切な値を決め打ちすることは必要なのですが、盲目的に『768px』を信じていいのでしょうか。

…というわけで、現時点で(たぶん)ベストなブレイクポイントの設定方法についてメモしていく。

レスポンシブ対応のブレイクポイントの最適解

結論からいうと、いまのところ以下のような書きかたがよろしい模様。

ポイントとなるのは

  • 特定のデバイスに依存しない
  • 単位はpxではなくem

という2点です。

ブレイクポイントを768pxにすることのデメリット

そもそも768pxというのは、iPadの画素数を基準にしたもの。つまり、特定のデバイスに依存した値となっています。では、Appleが急に「768pxやめた!iPadは800pxにするわ!」とか言いはじめたらどうでしょう。

…ブレイクポイントの値とスタイルを修正しなおす?

考えただけでも鳥肌がたちそうですよね。

ということで、「どのデバイスに対応するか」ではなく「どんなサイズにも対応できる」という観点でデザインされたのが、上記のブレイクポイントになります。

メディアクエリはpxではなくem指定

px指定があまりよろしくないというのはよく言われることですが、メディアクエリの単位にも同じことが言えるようです。

私の理解が足りていないため詳しい説明ができないのですが、ここを『px』で指定してしまうとブラウザによっては意図していない挙動をするようです。ちなみに、同じ理由で『rem』もダメ。

というわけで、単位は『em』一択というのが現状。

emは相対値となりますが、ブラウザのデフォルトフォントサイズが16pxなので、変な指定をしない限りは30em=480pxという換算が成り立ちます。

まとめ

個人的には600px~960pxという範囲が広すぎてスタイルを当てずらかったので、さらに768pxを足して以下のようなブレイクポイントで実装しました。

ちょっと話は逸れますが、フォントサイズをレスポンシブにしてしまうというアプローチもある模様。

ビューポートユニット(vw・vh)とem・remを駆使すれば、メディアクエリさえ書かずにレスポンシブに対応できてしまうというもの(カラムの変更とかは難しそうな気がするけどどうするんだろう)。

参考:https://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html

このあたりを頭にいれてコーディングしていけば、ブレイクポイントで悩むこともなくなるのかもしれません。

参考にしたサイト

①デバイスに依存しないブレイクポイントについて

https://nuconeco.net/responsive-ui-breakpoints/

②メディアクエリの単位の指定について

https://coliss.com/articles/build-websites/operation/css/media-query-units.html

まだまだ初心者で、いろんなサイトやソースを参考にしながら模索する日々です。間違っているところ、もっといい書き方などがあればぜひ教えてください!

2 Comments

ぴこ

こんにちは(^^)
参考にさせていただきました、ありがとうございます!
しかし私のやり方が間違っていたら申し訳ないのですが、
iphone7 plusを横にすると736pxになってタブレットの範囲にはいってしまい
うまく表示されませんでした
cssで調整するしかないのでしょうか。。(>_<)

返信する
natsuzawa

ぴこさん

返信が遅くなり申し訳ありません。
結論からいうと、2つの解決方法があるかと思います。

①スマホ横用メディアクエリの数値を変更する
ex.
@media screen and (min-width:30em) and ( max-width:48em) {
/* 480px~768px(スマホ横) */
}

②ブレイクポイントはいじらず、デザインで対応する
『スマホ横』でも、600px以下なら『スマホ横』用のデザイン、600pxを超える場合(iPhone7 Plus横画面etc)は『タブレット』用の表示にする

個人的には②のほうがいいのではないかと思います。
そもそも本記事のトピックが「デバイスに依存しないブレイクポイント」でした。そして、おっしゃる通りiPhone7Plusなどの大画面機種においては、横にするとタブレットと同等の幅になってしまいます。

ただし、「iPhoneの横画面だから『スマホ横』の表示にしなければいけないのか」といえば、そんなことはないと思います。むしろ、iPhoneであっても、 iPadと同じ画面幅があるならiPad用の表示をするのが自然です。つまり、デバイスではなく「画面の幅」に合わせる、ということになります。そうすれば、デバイスが多様化しても、「どのデバイスから見ても綺麗なデザインが担保されている状態」になるはずですよね。

ちょっと分かりづらいかもしれませんが、こんな説明でご理解いただけるでしょうか。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です