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

メモ：2017-03-01 16:21:44 +0900 JST Category：html

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

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

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

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

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

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

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

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