"em"と"rem"の違い

emは親要素のフォントサイズを参照する。
一方、remはroot(根っこ、最も祖先の親)要素を参照にしている。

• html

<section>
  <p id="em">16x1.5=24px</p>
		<section>
      <p id="em">14(直近の親要素サイズを参照)x1.5=21px</p>
			<p id="rem">16(root要素サイズを参照)x1.5=24px</p>
		</section>
	</p>
</section>

• scss

section{
  font-size: 16px;
	p#em{font-size: 1.5em;}
  section{
    font-size: 14px;
    p#em{font-size: 1.5em;}
  	p#rem{font-size: 1.5rem;}
  }
}

出力結果