css3から追加されたremを使ったフォントサイズ

これまでcssでフォントサイズを指定するときはpxや%を使っていたが、css3から「rem」という新しい単位が使える。
remは「root+em」の省略で、「ルート」である「html」に指定されたフォントサイズを基準にした単位のとこらしい。 これを使うと親要素のフォントサイズの継承なんて気にしないで常にルートのhtmlで指定したサイズを意識すればいいことになり便利である。但し、IEについてはIE9以降しかサポートされていないので、IE8にはこれまでとおりpxで指定しなければならない。

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

//②rem要素で指定しつつIE対策もする
h2{
font-size:1.4rem;
font-size:14px;
}
  1. ルートであるhtmlに基準となるサイズを指定する まずは基準となるサイズだが、「62.5%」と指定するとpxサイズへの変換が容易になる。これは、ブラウザでのhtml基準サイズは標準で16pxになっているので、基準サイズを10pxにして10px/remにしておけばpxへの変換が簡単になるためである。
  2. rem要素で指定しつつIE対策もする 「1.4rem」というサイズは、px単位だと1.4×10で「14px」になる。
    IE8以下対応にpx単位でも設定しておくといい。