css3から追加された新しい単位「rem」でのフォントサイズ調整が便利

css

cssでフォントサイズを決めていくときよく「%」とか指定しくこともあると思うけど、たまに「あれ?思ったより強いさくね?」って思うときある。
まぁ設計の問題だろ!ってツッコミはほっといて、css3から追加された新しい単位の「rem」てのが便利そう。

これは「root+em」の省略で、つまりは「ルート」である「html」に指定されたフォントサイズを基準にした単位。ということになるらしい!!

ってことはいくら入れ子に使用が親要素のフォントサイズの継承なんて気にしないで常にルートのhtmlで指定したサイズを意識すればいいってこと。(って認識してます)

//①ルートであるhtmlに基準となるサイズを指定する
html{ 
 font-size:62.5%;
}

//②rem要素で指定しつつIE対策もする
h2{
font-size:1.4rem;
font-size:14px;
}

①ルートであるhtmlに基準となるサイズを指定する

まずは基準となるサイズだが、「62.5%」と指定するようだ。(ネットで調べてみた限り)これは、px単位だと「10px」になるので基準値にするには区切りがいいからだろうな~。

rem要素で指定しつつIE対策もする

「1.4rem」というサイズは、px単位だと「14px」になる。またIE8以下が対応していないようなので、px単位でも設定しておくといいみたい。

ということで、なるべく「rem」単位を使用していきたいもんですね。ネットで調べたら普通に出てきましたが下記のサイトを参考させていただきました。

HTML5-CSS3 mag:フォントサイズの指定はCSS3の「rem」が便利そう