【HTML5/CSS3】CSSに書かれてるem,rem

文字のサイズ指定をしようと思ってソースを眺めていたら出てきた font-size: 1.2rem;
emって書かれてるところとremって書かれてるところの2種類がありました。
最近勉強したのでメモメモ_φ(・_・
とりあえずサンプルコード。
HTML
<div class="main">
メインテキスト
<div class="sub">
サブテキスト
</div>
</div>
上記の文字指定をremで行うと、
CSS
html {
font-size: 10px;
}
.main {
font-size: 1.1rem;
}
.sub {
font-size: 1.1rem;
}
この時、各文字のフォントサイズは、
メインテキスト 10px(htmlのサイズ) × 1.1 = 11px
サブテキスト 10px(htmlのサイズ) × 1.1 = 11px
一方、emを使うと、
CSS
html {
font-size: 10px;
}
.main {
font-size: 1.1em;
}
.sub {
font-size: 1.1em;
}
この時、各文字のフォントサイズは、
メインテキスト 10px(htmlのサイズ) × 1.1 = 11px
サブテキスト 11px(mainのサイズ) × 1.1 = 12.1px
となる。
remの場合はルート要素のfontsizeに対する倍率で制御する。
今日も一つ賢くなりました!