CSS の Em と Rem の単位は?

CSS プロパティを使用して要素のサイズを設定する場合、2 つのオプションがあることに気づくかもしれません。1 つは絶対単位で、もう 1 つは相対単位です。絶対単位は同じで固定されており、cm、mm、px を使用してサイズを設定できます。一方、相対単位は、他のもの (親要素またはその他の要素) に対して相対的なものです。

このチュートリアルでは、CSS における em 単位と rem 単位の比較を見ていきます。

Emユニット

em ユニットを使用すると、親要素のフォント サイズに応じて要素のサイズを変更できます。つまり、親要素のサイズが変更されると、子要素のサイズも変更されます。

em ユニットの機能を理解するために例を見てみましょう。

＃＃＃例＃＃＃

この例では、子要素のフォント サイズを

35px

に変更します。子要素の余白も 50px に変更されます。 ここでは、まず親要素を作成し、そのサイズを 17.5 ピクセルに設定し、子要素のフォント サイズを 1em に設定します。これは、子要素のフォント サイズが親要素の 2 倍になることを意味します。要素のフォント サイズは 1em になり、マージンは変更されません。コードの出力を見てみましょう。

Note

- font-size プロパティの使用法. font-size は、他のプロパティで使用される場合、父親 (親) 要素を基準とします。 リーリー 上記の出力には、親要素と子要素があります。出力では、子要素は親要素と同じサイズになります。 再会

単位 rem は、要素のルート、つまり html 要素に対する相対的なフォント サイズです。 でフォント サイズが指定されていない場合は、親要素に関係なく、ルート要素のみ、ブラウザのデフォルト値が使用されます。

＃＃＃例＃＃＃

子要素のフォント サイズを 50px に維持し、要素のマージンを 40px に設定します。rem 単位のサイズは、em とは異なり、すべての宣言に対して相対的になります。

次の例では、最初にルート要素を使用し、次に親要素と子要素を作成しました。次に、ルート要素のフォント サイズを 18 ピクセルに設定し、親のフォント サイズを 15 ピクセルに設定します。子要素のフォントは 1.5rem に設定されました。これは、親要素ではなくルート要素のサイズの 2 倍を意味します。出力を見て、rem ユニットが何をするかを見てみましょう。

リーリー

上記の出力では、子要素が親要素の 2 倍ではなく、ルート要素の 2 倍であることがわかります。

単位 em は、最も近い親のフォント サイズに相対的であり、複合効果が生じる可能性があります。単位 rem は、HTML のルート フォント サイズに相対しますが、複合効果は生じません。

CSS の Em 単位と Rem 単位

単位には、em、vh、vw、rem が含まれます。相対単位はスケーラブル ユニットとも呼ばれ、Web サイトの応答性に重要な役割を果たします。em 単位と rem 単位はどちらもスケーラブルで相対的です。単位はHTML ドキュメントの親要素のフォント サイズと rem 単位を基準とし、ドキュメント全体のフォント ルートを基準とします。

＃＃＃結論＃＃＃

em 単位と rem 単位の違いは、em 単位は親要素を基準にして計算されるのに対し、rem 単位は ルート要素を基準にして計算されることです。どちらの単位も相対単位であり、Web サイトの作成に役立ちます。レスポンシブなレイアウトになっています。これらの単位は、特定の要素のサイズを設定するのに役立ちます。

以上がCSS の Em と Rem の単位は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。