よく見かけるhtml {font-size: 62.5%;}という指定と、font-sizeやwidthなどをremで指定する方法について整理しておきたくてメモ。
そもそもremとは？
remは“root em”の略で、html（root）のフォントサイズを基準にする単位です。emと違って、親要素の影響を受けない。
この、「html（root）のフォントサイズを基準にする単位。」というのが重要で、htmlのフォントサイズを基準にしているということは、基準であるhtmlのフォントサイズが変わればremで指定したもののサイズにも影響するということです。
ブラウザのフォントサイズはデフォルトが16px
ブラウザのフォントサイズのデフォルトは16pxなので、html { font-size: 100%; }とは16pxということになります。
そのため、1rem = 16pxとなる。
では、デザインで見出しフォントサイズが24pxとなっている場合、何remと指定すればいいでしょうか。
計算すると、24 ÷ 16 = 1.5なので、24pxの場合、font-size: 1.5rem;と指定する必要があります。
このように基準が16の場合、◯ ÷ 16という計算が必要で変換するのが面倒です。
そこで、登場するのがhtml { font-size: 62.5%; }です。
なぜhtmlにfont-size: 62.5%;を指定するのか
ブラウザのデフォルトが16pxなので、16pxの62.5%は10pxとなります。
rem指定の基準であるhtml（root）のフォントサイズが10pxとなることで、1rem = 10pxとなります。
これで、24pxとremに変換すると24 ÷ 10 = 2.4となり、計算が楽になります。
このように、10px = 1rem、24px = 2.4remとなり、そもそも計算しなくても視覚的に2.4remが24pxだということが分かりやすくなります。
そもそもなぜremで指定するのか
そもそもremに変換せずにデザイン通りpxで指定すればいいのでは？と思うかもしれませんが、remで指定することで以下のメリットがあるため、最近では多くのWebサイトでremが使われています。
- ブラウザの文字サイズ変更に対応できる
- サイト全体のサイズ感をそろえやすい
- 計算や管理が楽になる
- レスポンシブ対応がしやすい
