rem은 CSS에서 em과 어떻게 다릅니 까?

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요소입니다. 브라우저 지원은 여전히 ​​제한적입니다.

---

하지만 그들을 의 직접 또는 가까운 부모의 글꼴 크기를 기준으로, REM 수면은 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 : a CSS unit which is relative to the font size of the parent element.

Example:

.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>

In the above example the green square is 160px by 160 px (unless you don't have browser default at 16px). This is because the browser default of the html element font-size is 16px and 10rem * 16px = 160.

The inside square is 10em big. Because its parent element is 5px the square is 5em * 10px = 50px.

How is this usefull:

By setting all units to rem have the following advantages:

• We can scale our whole application with one CSS media query, in this media query we can specify the font size. By altering the font size all the elements which have the unit rem will scale accordingly.
• When users are not using the default browser font-size of 16px our application will scale with the selected font size of the user.

참고URL : https://stackoverflow.com/questions/13941275/how-does-rem-differ-from-em-in-css