logo

CSSにおけるem単位とrem単位の違い

CSS で要素のサイズを設定する場合、2 つの選択肢があります。最初のものは絶対単位であり、もう 1 つは相対単位です。絶対単位は固定されており、他のものとは相対的ではありません。どのような場合でも、それらは常に同一です。これらには、cm、mm、px などが含まれます。一方、相対単位は他のものに対する相対的な単位です。親要素のサイズまたはメイン HTML のサイズである可能性があります。相対単位には、em、rem、vw、vh などが含まれます。これらはスケーラブルな単位であり、応答性の高いデザインに役立ちます。私たちの多くは、相対的な単位、特に そしてその レム 単位。これら 2 つの違いを詳しく見てみましょう。基本的に、rem と em はどちらもスケーラブルで相対的なサイズの単位ですが、em の場合、単位は親要素のフォント サイズに相対的ですが、rem の単位は HTML ドキュメントのルート フォント サイズにのみ相対的です。 rem の r はルートを表します。

両方を詳しく理解しましょう。



1. ユナイテッドの場合: em ユニットを使用すると、親のフォント サイズを基準にして要素のフォント サイズを設定できます。親要素のサイズが変更されると、子要素のサイズも自動的に変更されます。

注: em 単位が font-size プロパティで使用される場合、サイズは親のフォント サイズに相対します。他のプロパティで使用される場合、その要素自体のフォント サイズに相対します。ここでは、最初の宣言のみが親の参照を取得します。

  • .child 要素のフォントサイズは次のようになります。 40ピクセル (2*20ピクセル)。
  • .child のマージンは次のようになります。 60ピクセル 。これは要素のフォント サイズ (1.5*40px) の 1.5 倍です。

例: この例は、CSS での em ユニットの使用法を示しています。



HTML






> <>html>>>> <>head>>>> ><>title>>エムvsレムタイトル>頭>