<div>
 PCのときは固定（rem）、SPのときは変動（vw）
</div>

<div class="test1">
  <strong>パディング、マージンなど（function vw）</strong><br>
  PCではpadding:2rem 1.5rem、スマホではpadding:vw(20) vw(15); （ = padding:5.3333333333vw 4vw）
  <br>（→横幅が375pxのときに2rem 1.5remになる）
</div>

<div class="test2">
  <strong>フォントサイズ（mixin fz）</strong><br>
  PCではfont-size:1.6rem、スマホでは@include fz(16)（ = font-size:4.2666666667vw）
  <br>（→横幅が375pxのときに16pxになる）
</div>

html{
  font-size:62.5%; //ルートのフォントサイズを10pxにした上で→
}

body{
  font-size:1.6rem; // →サイト全体を1.6rem（=16px）にする
}

div{
  margin:10px;
}

@mixin sp {
  @media (max-width: (768px)) {
    @content;
  }
}

// モニタサイズ375pxを起点にしたvwのサイズ指定
@function vw($size, $viewport: 375) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

// 上記のvwを利用したフォントサイズの指定
@mixin fz($font_size: 10) {
  font-size: $font_size * 1px;
  font-size: vw($font_size);
}

.test1{
  background:#ffe464;
  padding:2rem 1.5rem;
  @include sp{
    padding:vw(20) vw(15);
  }
}

.test2{
  font-size:1.6rem;
  background:#9ae4ff;
  padding:20px;
  @include sp{
    @include fz(16);
  }
}