フォントサイズを画面幅に応じて可変にする - 未経験のwebサイト制作の勉強

remを使ったフォントサイズ

まずはremを使ったフォントサイズの指定を覚えましょう。
「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位の事です。

remを使う時の注意点

remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */

h1 {
font-size:4.0rem; /* 40px */
}

スマホ時にフォントサイズを画面幅に応じて可変にする

フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート（html）のfont-sizeをcalc(100vw / 32)とすることで、iPhone5などの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。

@media (max-width:640px){
html{
font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxに10px*/
}
h1 {
font-size:3.0rem;/*320pxの時30pxに*/
}
p {
font-size: 1.4rem;/*320pxの時14pxに*/
}
}

<br />