【CSS】ブラウザ幅ごとにスタイルを分けたい

はじめに

今回はブラウザ幅ごとにスタイルを分けたい時の記述についてご紹介しようと思います。

やり方

まずは幅の定義をします

width.scss

// 幅750px以下でスタイルをあてたい場合
@mixin sp {
  @media screen and (max-width: 750px) {
    @content;
  }
}

// 600px以上、800px以下でスタイルをあてたい場合
@mixin medium {
  @media screen and (600px <= width < 800px) {
    @content;
  }
}

定義し終わったら、使いたいscssファイルにimportします。

sample.scss

@use 'import/width' as g;

.container {
  // 通常のフォントサイズ
  font-size: 20px;

  // 幅750px以下でフォントサイズが40px
  @include g.sp {
    font-size: 40px;
  }

  // 幅600px以上、800px以下でフォントサイズが30px
  @include g.medium {
    font-size: 30px;
  }
  
}

おわりに

いかがだったでしょうか。
今はレスポンシブデザインが主流ですのでぜひ使ってみてください！