viewportの幅に応じてフォントサイズを可変させる

レスポンシブサイトではpc表示の時とタブレット、スマートフォンの画面に応じて、コンテンツとサイズが可変するのが一般的です。

フォントサイズも同様で、機種によって見やすいよう調整していくのですが、
ブレイクポイントに応じてフォントサイズを変更していくのはなかなか手間な部分があります。

そこで、vwやvhが便利です、画面幅全体に画像を大きく指定する場合や、比率をそろえて縮小したい場合

.content{
   width:calc((100vw) * 2 / 3 );
   height:calc((100vw) * 1 / 3 );
}

上記のように指定することで常に比率をそろえて縮小可能です。

フォントにもvw,vhを指定可能で、

ビューポート幅 375pxの場合、フォントサイズ15pxで表示させる場合

15px ÷ 375px × 100(%) = 4

.content p{
    font-size: 4vw
}

と上記の指定になります。

ただし、pcとスマートフォンとで同じ指定にしてしまうと、ブラウザ幅によって、pcで見た時のフォントサイズがとても大きくなってしまうので、
そういった場合、ブレイクポイントごとに指定していくとよいでしょう