横幅に応じて CSS を変化させる

メディアクエリを指定すると、条件に応じて CSS を変更できます。

• pc 向け
• タブレット向け
• スマートフォン向け

など、それぞれに適した CSS を適用させることができます。

例

// style.scss
$BREAK_POINT_TABLET: 1200px;
$BREAK_POINT_SP: 767px;

@mixin tablet {
  @media (min-width: $BREAK_POINT_SP) and (max-width: $BREAK_POINT_TABLET) {
    @content;
  }
}

@mixin sp {
  @media (max-width: $BREAK_POINT_SP) {
    @content;
  }
}

// test.scss
p {
  font-size: 18px;

  @include tablet {
    font-size: 1024px;
  }

  @include sp {
    font-size: 24px;
  }
}

とすると、

• 1200px 以上のとき font-size: 18px;
• 767px 以上 1200px 以下のとき font-size: 1024px
• 767px 以下のとき font-size: 24px

になります。

試してみた

1200px のとき、font-size がどうなるか気になったので、 試してみると font-size: 1024px になりました。