[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス
今後は pxでの指定をやめ、rem を使ったフォントサイズの指定にする。
Example: remとem
フォントサイズの指定にemを使った場合には、親要素すべてのフォントサイズを考慮しなければなりません。このことはフォントサイズの指定が複雑になってしまうことがあります。
この問題を解決する一つの方法は、単位にremを使うことです。remはhtmlのみのフォントサイズに基づいて計算されます。親要素ではないということです。
-----------------------------------------------------------------------------
html {
font-size: 100%; /* =16px */
}
body {
font-size: 2rem; /* =32px */
}
p {
font-size: 1rem; /* =16px */
}
-----------------------------------------------------------------------------bodyの「2rem」は、htmlを継承するので「32px」になります。
pの「1rem」は、親要素であるbodyの値ではなく、htmlを継承するので「16px」になります。
関連：
・[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
・[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary
