emを使ったフォントサイズ
emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。
remを使ったフォントサイズ
次にremを使ったフォントサイズの指定です。
「rem」とは、「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相対的に指定する単位の事です。
remを使う時の注意点
remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。
また、bodyl要素に「font-size: 1.6rem;」を指定しないとfont-sizeを指定していない箇所のfont-sizeが全て10pxになってしまうので注意が必要です。
html { font-size: 62.5%; } /* 10px */ body { font-size: 1.6rem; } /* 16px */ h1 { font-size:4.0rem; /* 40px */ }
html要素に62.5%を入れずに変数を使って指定する方法
mixin用ファイルに
@mixin font-size($size) { font-size: ($size / 16) + rem; }
各スタイルに
h1{ @include font-size(40); }
スマホ時にフォントサイズを画面幅に応じて可変にする
フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート(html)のfont-sizeをcalc(100vw / 32)とすることで、iPhoneSEなどの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。
@media (max-width:640px){ html{ font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxの時に10px*/ } h1 { font-size:3.2rem;/*320pxの時32pxに*/ } p { font-size: 1.4rem;/*320pxの時14pxに*/ } }