px単位からem単位への変換

使い方

該当の要素の文字サイズ(font-size)とemに変換したいpx数を使用します。

em単位ってどうやって使う？

emはfont-sizeを基準に相対的に変化する単位です。

ルートのfont-sizeを基準にするrem単位と違って、親要素のfont-sizeを基準に変化するのがemです。
そのため、要素のfont-sizeに合わせて可変するような余白関連に使用すると便利です。

例えば見出し要素の下に40px相当の余白を入れたい場合、見出しのfont-sizeに対してem単位でmargin-bottomを設定すると、レスポンシブなどでfont-sizeを変えるだけで相対的に余白も変わるようになります。

また、em単位を使用する要素にfont-sizeの指定がある場合は、親要素ではなくその要素のfont-sizeを基準にします。font-sizeは指定がなければ親要素から継承するので、その要素のfont-sizeを基準にすると考えても良いでしょう。

h2 {
  font-size: 32px;
  margin-bottom: 1em; /* 32px * 1 = 32px */
}

@media screen and (max-width: 480px) {
  h2 {
    font-size: 24px;
    /* margin-bottom: 1em; が適用されており、 このとき24px * 1 = 24pxとなる */
  }
}
              

例1 font-sizeプロパティにemを使用する場合

直近の親要素のfont-sizeを基準にします。

例2 font-size以外のプロパティにemを使用する場合

emを使用する要素のfont-sizeを基準にします。