結論を先に書くと、以下でremを使用しvwを感覚的に扱えるようになります。
html{font-size: calc( 1000vw / カンプサイズ );}
remをvwに直結させる
750pxのデザインカンプを渡された場合で説明します。
2倍のレティ-ナ想定で、375pxの画面でコーディングします。この時、カンプの半分の大きさで、ぴったりになるように、サイズを調整すると思います。
レスポンシブの場合、単位は、remかvwかvminが多いと思います。ここで数値をカンプのママからはとらずに、換算もしくは、sassなど自動計算していたと思います。それが、計算不要となります。カンプサイズが375pxを想定していた場合の例です。
html{font-size: calc( 1000vw / 375 );}
カンプサイズが375pxの（100vw）ものを作成するときに、100vwを同じ大きさの375で割ると答えは1です。1pxが1remになります。10倍の1000vwだと、10pxが1remになります。
カンプサイズが320pxを想定していた場合の例では
html{font-size: calc( 1000vw / 320 );}
カンプサイズが320pxの（100vw）ものを作成するときに、100vwを同じ大きさの320で割ると答えは1です。1pxが1remになります。しかし、chromeでは10pxが文字の最小サイズとなっているため、1pxをfont-sizeとはできません。そこで10倍の1000vwをルートサイズをfontサイズとすると、10px=1remになります。
1rem=10pxにするために、62.5%としていたことを、vwと関係から、1000vwをデザインカンプの基準となる大きさで割ることで1remがカンプでの10pxになることを狙っています。
「html{font-size: calc( 1000vw / カンプサイズ );}」を入れることで、デザインカンプの実現にrem単位を使うことで、スマホ各種サイズに応じた拡縮を行えます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
font-size: calc( 1000vw / 375 );/*カンプでの1rem=10px相当 お好みで*/
}
</style>
</head>
<body>
<p style="width:50vw;background: #fee">50vw</p>
<p style="width:18.75rem;background: #eef">18.75rem（375÷2）</p>
<p style="width:100vw;background: #fee">100vw</p>
<p style="width:37.5rem;background: #eef">37.5rem</p>
</body>
</html>
このやり方は、vwを元にrem換算しているので、デザインカンプから直感的に数値を挿入することができます。
sassでごにょごにょしたり、換算表やツールが不要になります。
画面サイズがカンプより小さければ、小さい比率に合わせてremの基準が変化します。font-size以外にも、あらゆるサイズに使えば、楽に閲覧者の画面サイズに対応することが可能となります。
可変して欲しくないサイズは、pxで記述しましょう。
想定外に大きくさせない
大きい画面ではそれ以上に大きくなってほしくない場合があります。
そんな時のスポンシブ対応は、デザインカンプ以下のスクリーンサイズでいい場合には、メディアクエリを使いましょう。
【例：375pxのカンプ以下のみ割合に応じて縮小に】
html{
font-size: 62.5%;
}
@media screen and(max-width:375px) {
html {
font-size: calc( 1000vw / 375 );
}
}
で対応。そうすることで、375pxの画面以上の場合には、カンプと同じ大きさで。画面サイズ320pxで見られた時には、100vw=320pxとなり、320/375=85.333…%で縮小表示されることになります。
これは、単位を必要とするすべての値にremを使用することで、画像を拡縮するかのようにすべての要素が拡縮されるようになります。