remの使い方

#remとは
rem（レム）は「root em」の略で、名前のとおり「最上位階層の『em（エム）』」を意味します。
###pxとの違い
#####メリット
pxによるサイズ指定は、主要なグラフィックソフトでWebサイト用デザインを制作する際サイズの単位としてｐｘが用いられていることもあり、デザインデータとの整合性を取りやすいです。

#####デメリット
文字サイズを指定すると、ブラウザによってはユーザー操作による文字サイズの拡大／縮小に対応できなかったり、タブレットやスマートフォンなど、高解像度のディスプレイを備える端末で表示をした場合に、端末ごとに見た目の文字サイズが大きく異なって表示（下図）されたりする場合があります。

###％との違い
#####メリット
様々な閲覧環境に対応するため、「％（パーセント）」という単位が用いられるようにより、「80％＝親要素の文字サイズの0.8倍」という形で文字サイズを指定することが可能になりました。

#####デメリット
グラフィックソフトでは文字サイズを％で指定することは少ないため、デザインとの整合性が取りづらく、親要素の文字サイズを基準とした指定になるため、HTMLタグが入れ子構造になっているような箇所では個々の要素の最終的な文字サイズが把握しづらい、という面があります。

###コード

html{
  font-size: 62.5%;/* 10px相当 */
}

/* body
----------------------------- */
body{
  font-size: 1.6rem;/* 16相当px */
}

##参考
remを使ってCSSの文字サイズ指定