remはCSSのemとどう違うのですか？

ウェブサイトのソースでは、開発者がremユニットを使用しているのを時々見ました。似ていemますか？私はそれが実際に何をするのかを見るためにそれを試しました、しかしそれは何に関連していますか？

デモ

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMsは親のフォントサイズに関連しています

REMsは基本フォントサイズを基準にしています

これは、中間コンテナがフォントサイズを変更する場合に重要です。EMを持つ子要素は影響を受けますが、REMを使用する子要素は影響を受けません。

単位rem（root em）は、ルート要素のフォントサイズを表します。HTMLドキュメントでは、ルート要素はhtml要素です。ブラウザのサポートはまだ制限されています。

一方で、EMは、その直接または最も近い親のフォントサイズに相対的であるレム HTML（ルート）フォントサイズに対してのみです。

emは、デザインの領域を制御する機能を提供します。のように、その特定の領域でタイプを相対的にスケーリングします。 remを使用すると、ページ全体でタイプを簡単に拡大縮小できます。

これが例です。要素のを変更すると、divsサイズがrem変更されます。のを変更すると、サイズが変わるだけです。font-sizehtmlemfont-sizediv

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

基本的に、emはCSSの最も近い親に相対的ですが、remは通常htmlタグであるページの親に相対的です...

以下のcssを実行すると、違いと、親がどのように影響を与えているかがはっきりとわかります。

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

概要：

• rem：CSSのフォントサイズに相対的な単位html要素の。
• em：親要素のCSSフォントサイズを基準にした単位。

例：

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

上記の例では、緑色の四角は160px x 160 pxです（ブラウザのデフォルトがにない場合を除く16px）。これは、html要素のブラウザのデフォルトfont-sizeが16pxand 10rem* 16px= 160であるためです。

内側の正方形は10em大きいです。その親要素は5px正方形であるため、5em * 10px = 50pxです。

これはどのように役立ちますか：

すべてのユニットにrem次の利点があるように設定する。

• 1つのCSSメディアクエリでアプリケーション全体をスケーリングできます。このメディアクエリでは、フォントサイズを指定できます。フォントサイズを変更することにより、単位を持つすべての要素rem応じて拡大縮小されます。
• ユーザーがデフォルトのブラウザを使用していない場合16px、アプリケーションのフォントサイズは、ユーザーが選択したフォントサイズに合わせて拡大縮小されます。

rem、em、pxは、cssのフォントサイズの異なる単位です。

em emは、その要素の親の計算されたフォントサイズと同じです。例：font-size：16pxで定義されたdiv要素、その子1em = 16px。

rem rem値は、ルートhtml要素を基準にしています。例：ルート要素のフォントサイズが16pxの場合、すべての要素で1 rem = 16pxです。

参照：https： //medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112-これはベストアンサーですが、追加したいだけです

Default browser size is 16px = 1em = 1 rem

emとremはフォントベースの相対単位であり、フォントまたは長さにemsを使用するのは異なるため、emsとremsはどちらもフォントベースですが、emsは親または現在の要素を参照として使用し、remsは参照として使用します。ルートフォントサイズを参照として使用します。

フォントサイズにemsを使用する場合、参照は、パーセンテージで発生するのと同様に、親が計算したフォントサイズです。

次の例では、ヘッダーの子要素の3 emフォントサイズは72ピクセルになります。これは、親フォントサイズの3倍である（150/100）* 16 = 24pxだからです。長さについては、少し異なります。ヘッダーの2emのパディングは、長さの測定値であるため、現在の要素のフォントサイズを参照として使用し、24ピクセルであることはすでにわかっているので、2emは48ピクセルのパディングになります。微妙な違いですが、重要な違いです。フォントの場合は参照が親であり、長さの場合は参照が現在の要素である場合にemを使用します。

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

レムについては、常にルートフォントサイズを参照として使用するため、実際にはフォントサイズと長さの両方で同じように機能します。これは、ルートフォントサイズが16であるため、ここにある10remのパディングは160ピクセルになることを意味します。

EM相対単位のフォントサイズは、ベース上で測定された最も近い親のフォントサイズに応じしかし、フォントサイズはデフォルトのフォントサイズによって、親要素のいずれかに定義されていない場合に定義されるルートhtml要素

REM相対単位のみによって計算されるルートhtml要素、従って、親要素のフォントサイズは、それに影響を与えません

CSS測定単位：em、remは、両方とも親のフロントサイズを基準にしています。サイズは、親のフォントサイズに応じて変わります。例：
rem：ルート要素のフォントサイズの100％。
em：親フォントサイズの100％。