119

remWeb サイトのソースでは、開発者がこのユニットを使用しているのを時々見かけました。に似ていemますか？実際に何をするのか試してみたのですが、何に対して相対的なのでしょうか？

デモ

HTML

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

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}
4

12 に答える 12

187

EMs は、親のフォント サイズに相対的です

REMs はベースの font-size に相対的です

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

于 2012-12-18T20:54:48.920 に答える
48

単位rem(ルート em) は、ルート要素のフォント サイズを表します。HTML ドキュメントでは、ルート要素はhtml要素です。

于 2012-12-18T22:07:47.240 に答える
26

emは直接または最も近い親の font-size に相対的ですが、remはhtml (ルート) font-size にのみ相対的です。

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

于 2015-03-02T12:19:27.893 に答える
6

ここに例があります。要素の を変更すると、divsサイズが変更されます。のサイズを変更すると、サイズが変わるだけでサイズが変わります。remfont-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>

于 2015-08-28T02:08:16.823 に答える
1

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

フォントサイズに ems を使用したい場合、リファレンスは単純に親が計算したフォントサイズであり、パーセンテージの場合と同様です。

次の例では、header 子要素の 3 つの em フォント サイズは、(150/100)*16=24px である親フォント サイズの 3 倍であるため、72 ピクセルになります。長さに関しては、ちょっとだけ違います。ヘッダーの 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%;
}

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

于 2020-07-14T08:33:15.363 に答える