ブレイクポイントのサイズをどうするか。
悩ましいところですが、個人的にはBootstrapのブレイクポイントを採用しています。
Bootstrapのブレイクポイントは下記の通り。
・768pxまで（767px以下）がスマートフォン表示
・992pxまで（768px～991px）がタブレット表示
・1200pxまで（992px～1199px）がデスクトップ表示
・1200px以上は大きいデスクトップ表示
また、メディアクエリのcssの書き方としては下記の通り。
@media screen and (min-width: 992px) {
ここにCSSを記述
} /* デスクトップ表示 */
@media screen and (min-width: 768px) and (max-width: 991px) {
ここにCSSを記述
} /* タブレット表示 */
@media screen and (max-width: 767px) {
ここにCSSを記述
} /* スマホ表示 */
ちなみに、
「min-width」が○○px以上という意味。
「max-width」が○○px以下という意味。
最近は端末の大型化も進んでいるので、もう少し広めに取ることも必要も出てくるかと思います。
