【CSS】ブレイクポイントの指定方法について

07/17/2021

CSS

ブレイクポイントはよく使うので、メモにして残りしておきます。

// インナー幅
$inner: 1100px;

// ブレイクポイント
@mixin pc {
    @media screen and (min-width: #{$inner}) {
      @content;
    }
  }
  @mixin tab {
    @media screen and (max-width: #{$inner - 1px}) {
      @content;
    }
  }
  @mixin sp {
    @media screen and (max-width: 767px) {
      @content;
    }
  }

こんな感じで、まずWEBサイトのインナー幅を変数で指定します。

そしてPCとタブレット、スマホのブレイクポイントを指定。

widthの部分はPCは$innerの幅でタブレットは$innerから1px引いた数値からスタートし、767px以下はスマホ表示にしました。