レスポンシブデザインのためにブレイクポイントを調べてみた

リキッドレイアウトといっていた時代からレスポンシブデザインといわれる時代となり、 さまざまなサイズの端末へ対応する必要がでてきました。

スマートフォン・タブレット・PC等、画面サイズの違う端末へ対応するため、CSS(スタイルシート)の Media Queriesを使ってデザインを切り替えます。このデザインが切り替わるポイントを「ブレイクポイント」といいます。

ここでは、CSSフレームワークに設定されているブレイクポイントを確認し、 ブレイクポイントを何処に設定していくと良いのか参考にしていきたいと思います。

ブレイクポイントって何ピクセルに設定しますか?

ホームページの更新を再開しようと思ったとき、手っ取り早くbootstrapを使ったのですが、 スクラッチで書いてみようと思ったときに、世の中ではどんなブレイクポイントが一般的なのかと気になったので 調べてみました。

CSSフレームワークのブレイクポイント比較

ブレイクポイントまとめ

参考にしたフレームワークは、次のフレームワークとなります。

  • Bootstrap3
  • Fundation6
  • Semantic UI
  • Skeleton

※Fundation6は、ブラウザのデフォルトフォントサイズ16pxを基準に計算しています。

768px,1000px,1200pxあたりは、ほぼ共通しているようなので参考にしていきたいと思います。