CSSのremとemの単位

投稿日: 2022-04-20 2022-10-06
タグ: css

序章

CSSのユニットに関しては、多くの良い選択肢があります。今日のレスポンシブデザインの世界では、emやremユニットなどの相対的なユニットにより、すぐに使用できる適応性と柔軟性が得られ、サイズをfont-size（ s）マークアップの上位に定義されています。

emユニットとremユニットをもうしばらく使用していると思いますが、この2つのユニットの正確な違いと、どちらのユニットがユースケースに適しているか疑問に思われるかもしれません。。できるだけ簡単に分解しましょう。

概要： em font-sizeプロパティの単位は、親要素のfont-sizeを基準にしています。 font-size以外のプロパティのem単位は、現在の要素のfont-sizeを基準にしています。 rem の単位サイズは、常にルートのフォントサイズを基準にしています。 html エレメント。

emユニット

em は、タイポグラフィの世界から借用したもので、font-size[を基準にした要素のfont-sizeを設定できるユニットです。その親のX162X]。

この簡単な例を見てみましょう。

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
}

この例では、子のfont-sizeは27px （1.5 * 18px = 27px）になります。

親要素がfont-sizeの値を指定していない場合、値はDOMツリーの上位で検索されます。ルート要素までfont-sizeが指定されていない場合（<html>）、ブラウザのデフォルトの16pxが使用されます。

とてもシンプルでわかりやすいですよね？ em ユニットは、 font-size を設定するだけでなく、ユニットが予想されるほとんどすべての場所（パディング、マージン、幅、高さ、最大-）で使用できます。幅、…画像が表示されます！） em単位がfont-size以外のプロパティで使用されている場合、値は要素自体のfont-sizeを基準にしています。 ]。

例に追加しましょう：

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
  padding: 2em 1em;
}

上部と下部のパディング .child 54pxになります。これは、現在の要素のフォントサイズの2倍です（ 2 * 27px ）
左右のパディング .child 27pxになります。これは、要素のフォントサイズの1倍です。

覚えておいてください：emユニットがfont-sizeで使用されている場合、サイズは親のフォントサイズを基準にしています。他のプロパティで使用する場合は、要素自体のフォントサイズを基準にしています。

複合効果：パラダイスのトラブル

これまでのところ、 em ユニットを使用するとすべてがうまくいきますが、ユニットが1つのレベルから別のレベルに複合する可能性があるという事実から問題が発生する可能性があります。

同様の基本的な例を残しましょう：

.parent {
  font-size: 15px;
}
.child {
  font-size: 2em;
}

しかし、次のようにマークアップで使用しましょう。

<div class="parent">
  I'm 15px
  <div class="child">
  I'm 30px, as expected
    <div class="child">
    I'm 60px, trouble starts!
      <div class="child">
      I'm 120px, now we're really in trouble!
      </div>
    </div>
  </div>
</div>

私は15pxです

さすがに30pxです

私は60pxです、トラブルが始まります！

私は120pxです、今私たちは本当に困っています！

したがって、ご覧のとおり、 em ユニットの効果は、複数のem-fontサイズの要素が互いに含まれている場合に複合する可能性があります。これは問題になる可能性があり、設計に意図しない結果をもたらす可能性があります。

この問題が、remユニットが作成された理由です。

レムユニット

rem ユニット（ root em の略）は、ルート要素のfont-size値に常に基づく相対ユニットです。 <html> エレメント。そして、 <html> 要素にフォントサイズが指定されていない場合、ブラウザのデフォルトの16pxが使用されます。

つまり、 rem ユニットを使用すると、親要素の値が無視され、ルートの値のみが考慮されます。

同様の例ですが、レムでは：

.html {
  font-size: 16px;
}
.parent {
  font-size: 15px;
}
.child-rem {
  font-size: 2rem;
}

<div class="parent">
  I'm 15px
  <div class="child-rem">
  I'm 32px, as expected
    <div class="child-rem">
    I'm 32px, yep!
      <div class="child-rem">
      I'm 32px, like clockwork!
      </div>
    </div>
  </div>
</div>

私は15pxです

さすがに32pxです

私は32pxです、うん！

私は時計仕掛けのように32pxです！

ご覧のとおり、 rem ユニットを使用すると、emユニットの複合効果を回避できます。 rem では、常に font-size またはルート要素に基づいているため、驚くことはありません。

font-size 以外の値（マージン、パディングなど）についても同じことが言えます。これらの値で rem 単位を使用すると、ルート要素のフォントサイズに相対的です。

em vs rem、どちらが良いですか？

本当に良いユニットはありません、そしてそれはすべてあなたの個人的な好みに依存します。一貫性と予測可能性のためにすべてをremユニットで設計することを好む人もいれば、近くの親要素の影響が理にかなっている場所でemユニットを使用することを好む人もいます。

getdocs

13036