CSS の px、em、rem の違い Study Notes_html/css_WEB-ITnose

簡単に言うと、pxは絶対単位、emとremは相対単位です。誰もが知っている px について、ここでは主に em と rem について説明します。

次の段落があります:

<p>当斧头来到树林的时候，好多树都说，至少<span>它的手柄</span>是自己人</p>

フォント サイズを設定しない場合は、デフォルトのサイズ (16px サイズ) を使用します。効果は次のとおりです:

em

em は以下を指します。親要素に対する相対的なサイズ、つまり、pとspanのサイズは両方とも1emで、1em = 16pxです。

span のサイズを 2em に変更すると、効果は次のようになります:

span{ font-size: 2em; }

spain に第 1 レベルのタグがあると仮定すると、span のサイズが p の 2 倍であることがわかります:

<p>当斧头来到树林的时候，好多树都说，至少<span>它的<a>手柄</a></span>是自己人</p>

これで p タグのサイズがわかりました。それは 1em で、スパン サイズは 2em です。a タグを p タグと同じサイズにしたい場合は、何に設定する必要がありますか?

em は相対ラベルであるため、1em には設定できませんが、親要素のスパンに対して 0.5em に設定できます:

a{ font-size: 0.5em; }

rem

em を使用すると、相対的なサイズを非常によく表示できますが、次のこともわかりました。子要素、親要素以外の要素のサイズを設定したい場合、相対的なサイズも計算する必要がある場合があります。Rem はこの問題を解決します。

rem は、HTML ルート要素に対する相対的なフォント サイズを指します。

先ほどの例でも、a タグのフォント サイズが p タグのフォント サイズと同じであること、および p タグのサイズが html のフォント サイズのちょうど 1 倍であることを確認したいので、次のようにすることができます。 a タグのサイズを 1rem:

a{ font-size: 1rem; }

に設定しても効果は同じです。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。