hene

hene.dev

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

横幅に応じて 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 になりました。

関連記事