remでの記述の考え方は主に2つあります。htmlのfont-sizeを62.5%にする方法と100%のまま使う方法です。

bodyを62.5%にする方法はデイトラメンターのいちくんがデモサイト付きでブログ（https://tips-web.net/easy-responsive-coding/）で紹介してくれています。

【もう悩まない】レスポンシブコーディング

しかし、今回ダウンロードしていただいた私が用意したフォルダではbodyは100%のままです。

その違いを説明していきます。

62.5%の場合

※調べるとよく出てくるやつです！

詳細は上の記事から確認してほしいのですが、結論以下の通りに設定すると、(min-width: 769px) and (max-width: 1440px)の間は基準となるフォントサイズがvwによって変わるのでそれに合わせてフォントサイズが変わります。

html {
  font-size: 62.5%;
}

@media screen and (min-width: 769px) and (max-width: 1440px) {
  html {
    font-size: 0.625vw;
  }
}

それでこの場合、sassでfunctionで以下のように設定したら、

@function rem($pxcel) {
  @return $pxcel * 0.1rem;
}

padding:30pxだった場合、以下のように記述することで、

.hoge {
  padding: rem(30);
}

自動的にcssへコンパイルされるときにremに変換してくれます。

.hoge {
  padding: 3rem;
}

それで、このremというのはルートのフォントサイズ(HTMLで指定された値)を参照して、大きさが変わるので、

@media screen and (min-width: 769px) and (max-width: 1440px) {
  html {
    font-size: 0.625vw;
  }
}