とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

レスポンシブWebデザインのブレイクポイントの設定2019年度版

レスポンシブWebデザインのブレイクポイントの設定2019年度版



レスポンシブWebデザインでの

ブレイクポイントの設定の目安に

なるのがマテリアルデザインの

ブレイクポイントの数値です。

 

Responsive layout grid - Material Design

マテリアルデザインのブレイクポイントシステム

マテリアルデザインのブレイクポイントシステム

ブレイクポイントは細かく設定しすぎると、

実装が面倒になる場合があるので、少なければ

少ないほどいいと思っているのですが、

迷ったら上記の表のサイズを参考にすればよいと

おもいます。

 

マテリアルデザインのサイズが参考なるよ、

といいつつ僕がよく実装する数値は

iOSデバイスを意識した数値で以下のパターンです。

 

375px、414px、640px、750px、960px、1024px

 

正直iPadやタブレットではPC表示のサイトのほうが

見やすいとおもっていて、タブレットをわざわざ

デザインするのではなくてPCサイト表示させたり

しています。

 

なので最近は750pxだけベースとして設定して、

あとは要所要所で適宜リキッドに、

レスポンシブさせて、レイアウト調整をしています。

 

ブレイクポイントのサイズは下記の記事も参考になります。

nuconeco.net

nuconecoさんで紹介されているわかりやすい図

nuconecoさんで紹介されているわかりやすい図

 

下記の記事も参考になります。

hashimotosan.hatenablog.jp

こちらの記事では

スマホ 320〜559px
タブレット 560〜959px
PC 960px以上

とされています。