【css】scssファイルでPC版とSP版のブレイクポイントを設定する方法

Web技術

2020.07.24

$breakpoint_sp: 767px;
$breakpoint_pc: 768px;

@mixin sp {
  @media screen and (max-width: $breakpoint_sp) {
    @content;
  }
}

@mixin pc {
  @media screen and (min-width: $breakpoint_pc) {
    @content;
  }
}

//使い方例
.container {
  @include pc {
    width: 980px;
    margin: 0 auto;
  }
  @include sp {
    width: 100%;
  }
}

(Visited 85 times, 1 visits today)

Jacob Wickline より:

2026年8月19日 02:32

The next time I read a blog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to read, but I actually thought youd have something interesting to say. All I hear is a bunch of whining about something that you could fix if you werent too busy looking for attention.

返信