Web Design Leaves

ベースフォントとして html に「%」を使ってサイズを指定

html 要素にフォントのサイズ（ベースフォント）を一つ定義して、すべての子要素を「rem」で定義する。

html { font-size: 62.5%; }    /* ベースのフォントサイズを10px 相当に設定 */

フォントサイズを指定したい要素に対して、12px で指定したい場合は、「font-size: 1.2rem;」と記述する。

サポートしていないブラウザに対しては最初に「px」を指定し、その後に「rem」で上書きすることで対応可能。

html { font-size: 62.5%; }
body { font-size: 13px; font-size: 1.3rem; } /* =13px */
h1   { font-size: 32px; font-size: 3.2rem; } /* =32px */

• rem (root em) ：ルート要素（html 要素）に対する相対的なフォントサイズの単位。
• em：親要素に対して相対的なフォントサイズの単位。親要素の「font-size」プロパティの値を基準とし、親要素がないときはブラウザの規定値を基準とする。（em でのサイズ指定は複利計算されるため、入れ子になった要素では、サイズをリセットしたりと面倒）