emとは？emとpxの紹介と変換方法

それは何ですか？

em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです。したがって、調整されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625em になります。フォントサイズの変換を簡素化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値が 16px*62.5%=10px に変更され、12px=1.2em、10px=1em になります。つまり、元の px 値を 10 で割って、em を単位として使用するだけです。

em には次の特性があります。

1. em の値は固定されていません。
2. em は親要素のフォントサイズを継承します。

書き換え手順:

1. body セレクターで Font-size=62.5% を宣言します。
2. 元の px 値を 10 で割り、単位として em を使用します。
簡単ですよね？上記の2つの手順だけで問題が解決できるのであれば、誰もpxを使用しません。上記の 2 つの手順を実行すると、Web サイトのフォントが想像よりも大きくなることがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ div のフォントサイズを 1.2em (12 px) に設定できます。次に、セレクター p のフォントサイズを 1.2em に設定しますが、p がコンテンツの子である場合、p のフォントサイズは 12px ではなく、1.2em = 1.2 * 12px = 14.4px になります。これは、コンテンツのフォントサイズが 1.2em に設定されているためです。この em 値は、親要素本体のサイズ (16px * 62.5% * 1.2 = 12px) を継承します。p は子であるため、em はコンテンツのフォントの高さ (12px) を継承します。したがって、1.2em の p は 12px ではなく 14.4px になります。
3. 拡大したフォントのem値を再計算します。フォントサイズの繰り返し宣言を避けてください。つまり、前述の 1.2 * 1.2 = 1.44 という現象を避けてください。たとえば、#content でフォントサイズを 1.2em と宣言した場合、p のフォントサイズを宣言するときには、この em はその em ではないため、1.2em ではなく 1em しか指定できません。#content のフォントの高さを継承し、1em=12px になります。

<<: JavaScript でプライベートメンバーを作成する

>>: overflow:autoの使い方の詳しい説明