ブラウザのデフォルトフォントサイズはだいたい16px。
単位の種類
px
絶対値。
16px分の大きさ(高さ)。
pt
絶対値。
em
相対値。
1文字分という意味。font-sizeを指定していなければ、1em = 16px
親要素のfont-sizeの影響を受ける。
|
1 2 3 4 5 6 7 8 9 |
html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 3em; /* =96px */ } |
この場合、<body>は親の<html>を継承して32px(16px × 2)になって、<p>は親の<body>を継承して96px(32px × 3)になる。
rem
相対値。
1文字分という意味。font-sizeを指定していなければ、1rem = 16px
emとの違いは影響を受けるのは親要素ではなくルート(<html>)のみという事。
|
1 2 3 4 5 6 7 8 9 |
html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 3rem; /* =48px */ } |
この場合、<body>は<html>を継承して32px(16px × 2)になって、<p>も親ではなく<html>を継承して48px(16px × 3)になる。
%
相対値。
1文字分という意味。font-sizeを指定していなければ、1% = 16px
レスポンシブを考慮すると
remが一番良いと思う。ただ対応していないブラウザバージョンもあるのでpxとremを指定する方法が最適な感じ。
メディアクエリを使ってhtmlのフォントサイズだけをかえれば全部かわってくれるのも後々楽になると思う。