1. まとめトップ

レスポンシブサイトのブレイクポイント。みんなどうしてる?

web初心者の私が勉強したレスポンシブサイトのブレイクポイントのまとめです。

更新日: 2015年08月15日

1 お気に入り 3946 view
お気に入り追加

この記事は私がまとめました

◎現在のWEBの閲覧比率はPCが4割、モバイルが6割だそう。

◎楽天での流通総額の43%がモバイルから(2014年度)

◎さらに Googleさんが「スマホ対応」サイトが検索結果の上位にランキングすると発表。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

●スマートフォン用 〜480px(1カラム)※960pxの半分のサイズで使いやすいので
●小型タブレット用 〜768px(1カラム)
●大型タブレット用 〜960px(2カラム・可変幅)
●PC用 1280px〜(2カラム・固定幅)

ブレイクポイントを決める際に参考にした記事

480px、768px、992px、1200pxという4つのブレークポイントを2015年夏は使用しています。

更新日:2014年7月29日

●スマートフォン向け 〜480pxまで(1カラム・可変幅)
●小型タブレット向け 〜768pxまで(1カラム・可変幅)
●大型タブレット向け 〜960pxまで(2カラム・可変幅)
●PC向け 961px以上(2カラム・固定幅)

更新日:2014年3月9日

●スマホは余裕を持って~480pxまで確保
●旧型のスマホのランドスケープ(横画面)も~480pxに含めて考える(iPhone 4s Landscape = 480px)
●小型タブレットは481px~768pxとしてiPad Portraitも含める
●iPadなどのタブレットは768px~1024pxまでを適用
● iPad Landscape1024pxではPC向けを適用
●1024px~はパソコンと同じデザインを適用

これだととっても売れたNexus7は現行機種のランドスケープでも960pxです。パソコン用は見れません。7インチ端末の需要から考えると960pxというブレイクポイントもおもしろいかもしれません。

更新日:2014年06月20日

・ブレイクポイント1: 600~768px: スマートフォン/タブレットの境界
・ブレイクポイント2: 960px: タブレット/狭いPCの境界 (タブレット横置きを含む)
・ブレイクポイント3: 1,280px: 狭いPC(タブレット横置きを含む)/広いPCの境界

更新日:2015年05月28日

・Crappy Android(縦:240px x 320px 横:320 x 240px)
・iPhone 4 / 4S (縦:640 x 960 横:960px x 640px) + iPhone 3GS※
・iPad (縦:768px x 1024px 横:1024px x 768px)
に対応させ、あとはデバイス依存に任せるのが一番だと考えています

更新日:2012年08月16日

その他参考にさせて頂いたサイト

さいごに

数年で大きく変わるWEBの仕様。解説はあれど、要点を明言してくれているサイト様は少なく、ありがたい限りです。初心者としては結論を言い切って欲しいので、勉強の成果を自分で言い切ってみました。参考サイトの皆様、ありがとうございます。

1