とある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さんで紹介されているわかりやすい図