More than 5 years have passed since last update.

1remとfont-size: 62.5%について

Last updated at 2019-08-03Posted at 2019-08-03

html {
  font-size: 100%;
}

100% = 16px = 1remなので、これすなわち

html {
  font-size: 16px;
}

●remはhtmlで指定されたフォントサイズの●倍なので、
この状態での1remは、
16px * 1.0
つまり、1rem = 16px

ここで、

html {
  font-size: 62.5%;
}

とすると、100% = 16px = 1remなので、これすなわち

html {
  font-size: 10px;
}

だって、16px * 0.625 = 10pxだから。

繰り返すけど、
●remはhtmlで指定されたフォントサイズの●倍なので、
この状態での1remは、
10px * 1.0
つまり、1rem = 10px

ではこの状態での1.2remは？
10px * 1.2
つまり、1.2rem = 12px

結論

html {
  font-size: 62.5%;
}

を指定するだけで、

●rem = (● * 10)px
となり、remの係数を10倍すればpxの数値となって計算が簡単になることがわかった。