レスポンシブ対応のブレイクポイントメモ

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではレスポンシブ対応を行なう際の PC、タブレット、スマホの幅（ブレイクポイント）のメモになります。

前回の記事

前回はChart.jsというライブラリを活用してチャートの表示を実装しました。 kuro-engineer-log.hatenablog.com

以前作ったプロジェクトで実際に使ったやつ

lgまでがタブレット想定。 xlより広い幅はパソコン想定

// min-width
$breakpoint-up: (
        'sm': 'screen and (min-width: 400px)',
        'md': 'screen and (min-width: 768px)',
        'lg': 'screen and (min-width: 1000px)',
        'xl': 'screen and (min-width: 1200px)',
) !default;

// max-width
$breakpoint-down: (
        'sm': 'screen and (max-width: 399px)',
        'md': 'screen and (max-width: 767px)',
        'lg': 'screen and (max-width: 999px)',
        'xl': 'screen and (max-width: 1199px)',
) !default;

ブレイクポイントのサンプルその①

スマホ: 〜479px以下

タブレット: 480〜769px

PC: 770px〜

ブレイクポイントのサンプルその②

スマホ: 〜480px以下

タブレット: 481〜959px

PC: 960px〜

ブレイクポイントのサンプルその②

スマホ: 〜479px以下

タブレット: 480〜959px

PC: 960px〜

まとめ

スマホは基本479以下を使用する事が多い。 タブレットは769または1,000弱付近 そして基本1,000を超えた辺りからはPC用にしておけば良さそう。