フォントサイズ "rem" と "em" の指定
"rem" と "em" が相対指定っていうのは知ってるよね？
では、何基準の相対なのかな？
相対ってことは、何かを基準にしてるってことだよね？
▼答え
"rem" は "root-em" の略
html文書のrootはhtmlタグ。
だから
remの単位は、htmlタグのフォントサイズに対して、何emかを指定してるっていう意味になるんだ。
では、 "em" ってなーに？
"em" っていうのは、「親要素の文字サイズを基準にして、どのくらい大きいの？小さいの？」っていう指定なんだ。
em (単位) - Wikipedia
https://ja.wikipedia.org/wiki/Em_(%E5%8D%98%E4%BD%8D)em（エム）は、出版において使用される長さの単位である。文字の大きさを表す。名称の由来は大文字M。Mの活字が縦横いっぱいの空間を占めることから、文字の大きさの基準となったとされる。現代では文字の高さと同じ幅と定義され、和文組版では全角幅に等しい。
ちなみに、htmlの "emタグ" はEmphasis（強調）の略なので、フォントサイズの指定の"em"とは意味がちがうんだ。
実際のサイズはいくつ？
<!DOCTYPE html>
<html lang="ja">
<head>
<title>remとかemとか</title>
</head>
<body>
<p><span>フォントサイズは何pxになるのかな？</span></p>
</body>
</html>
html {font-size: 16px;}
p {font-size: 10px;}
span {font-size: $font-size;}
//$font-sizeが "1rem" のとき、フォントサイズは "16px" になる
//$font-sizeが "1em" のとき、フォントサイズは "10px" になる
▲$font-sizeが "1rem" のとき、実際のspanのフォントサイズは "16px" になる
▲$font-sizeが "1em" のとき、実際のspanのフォントサイズは "10px" になる
まとめ
「htmlのフォントサイズを62.5%にするのは何でだろう？」
remやemの意味を調べたきっかけです。
言葉の意味や歴史まで知ってみると、本当の意味を理解しやすいと思う。
実際に "rem" が "root-em" ってことを知ってからは、フォントサイズの基準をhtmlに記述する意味が理解できました。
それと、
"em" という呼称は大文字Mに由来してるって・・・めっちゃ驚きました！！！