motto56's blog

いろんなことの備忘録。Webとか写真とか。

レスポンシブサイトのブレイクポイント備忘録

いろいろあるタブレットのブレイクポイント。

昔参考になった記事のメモが出てきたので、備忘録として残しておく。

iPad Proとかサイズが増えてるので要更新・・・。

 

スマホとPCサイトで振り分ける場合

ブレイクポイントは768pxあたり。

 

タブレットの横と縦で分けたい場合。

iPadが768×1024なのでmin-widthを769pxにすると縦画面はモバイル向け、横画面はpc向けになる。

さらにmin-width1025pxのブレイクポイントを作ると、横画面用のレイアウトもできる。

つまり、

〜768px:スマホ

769〜1024px:ipad横画面

1025px〜:pc