CSS em_html/css_WEB-ITnose のユニット

1. はじめに

w3cschool は次の CSS サイズ単位を提供します:

単位の説明

%	Percent
in	inch
センチ	センチ
mm	mm
em	1em は現在のフォント サイズと同じです。 2em は、現在のフォント サイズの 2 倍に相当します。 たとえば、要素が 12pt で表示される場合、2em は 24pt になります。 CSS では、em はユーザーが使用するフォントに自動的に適応するため、非常に便利な単位です。
ex	ex はフォントの x 高さです。 (x-height は通常、フォント サイズの半分です。)
pt	pt (1 pt は 1/72 インチに相当します)
pc	12 ポイント タイプ (1 個は 12 ポイントに相当します)
px	ピクセル (コンピュータ画面上の点)

em の説明をよく見ると、それが重要であることがわかります。

em は、ユーザーが使用するフォントに適応するために使用されます。1em は現在のフォント サイズ (font-size 属性) に相当し、2em は現在のフォント サイズの 2 倍に相当します。

Visible em は、特定のフォントの相対サイズとして使用されます。

2. 例

「ブラウザのデフォルト スタイル」の記事では、多くのデフォルト スタイルが em 単位で表示されています。

次に、デフォルトのスタイルの 1 つを例として取り上げます。

h1              { font-size: 2em; margin: .67em 0 }h2              { font-size: 1.5em; margin: .75em 0 }h3              { font-size: 1.17em; margin: .83em 0 }h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu            { margin: 1.12em 0 }h5              { font-size: .83em; margin: 1.5em 0 }h6              { font-size: .75em; margin: 1.67em 0 }h1, h2, h3, h4,h5, h6, b,strong          { font-weight: bolder }

フォントの太さの太字に加えて、タイトル シリーズにはフォント サイズの設定とマージンの予約があることがわかります。次に、h1 のフォント サイズとマージンの予約を見てみましょう。

上の図からわかるように、デフォルトでは、h1 の値は font-size: 32px; margin-bottom: 21.44px; になります。以下に答えてください。

相対単位 em は、要素自体のフォント サイズに相対します。 CSS の唯一の例外は font-size 属性で、その em 値と ex 値は親要素に対する相対的なフォント サイズを参照します。

Chrome の h1 のデフォルトのスタイルを見てください

h1 のデフォルトの font-size: 2em、親要素に対して相対的に、親要素本体の font-size: 16px (デフォルト値) なので、それを計算します。フォントサイズは h1:32px です。

font-size を除く他の属性の em 計算は、要素自体のフォント サイズに相対します。したがって、 margin-bottom:0.67em の計算値は 0.67*32px=21.44px となります。

3. リソースリンク

Rem VS Px

CSS の強力な em

この記事の著者である starof、知識自体は変化しており、著者も常に学習し成長しており、記事の内容はまた、随時更新されます。読者の誤解を避けるため、出典を追跡しやすくするため、転載する際には出典を明記してください。ご質問がございましたら、お気軽に私と話し合って一緒に進歩してください。