px単位からem単位への変換
pxからemに変換する
- その要素のfont-sizeが
- ほしい値が
- 設定値は
使い方
該当の要素の文字サイズ(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を基準にします。