LoginSignup
3
7

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-08-03
html {
  font-size: 100%;
}

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

html {
  font-size: 16px;
}

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

ここで、

html {
  font-size: 62.5%;
}

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

html {
  font-size: 10px;
}

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

繰り返すけど、
●remhtmlで指定されたフォントサイズの●倍なので、
この状態での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の数値となって計算が簡単になることがわかった。

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7