理解しておく利点
親要素と子要素の比率の関係を変更したくない場合に実装が簡潔になる
em
「現在指定されているフォントサイズ」に対して相対的な大きさを指定
子要素のフォントサイズを指定しない場合
親要素のサイズが適用される。
例えば
親要素がfont-size: 40px;のとき、
中の子要素は、font-size: 40px;の大きさに。
子要素のフォントサイズを2emなどにした場合
親要素の二倍のサイズが適用される。
例えば
親要素がfont-size: 40px;のとき、
中の子要素は、font-size: 80px;の大きさに。
メリット
フォントサイズ（親要素）を変更すると、中の画像（子要素）も同じ比率で拡大縮小される
rem
「htmlで指定さているフォントサイズ」に対して相対的な大きさを指定
htmlタグはデフォルトサイズがfont-size: 16px;それに対して2倍や0.5倍
# デフォルトのフォントサイズを10pxに
html {
font-size: 62.5%;
}
# デフォルトのフォントサイズと同じ大きさにする
img {
width: 1rem;
}
メリット
プロジェクト全体でhtmlのフォントサイズを指定してそれを基準にできる