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: 부모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>

위의 예에서 녹색 사각형은 160x160 픽셀입니다 (브라우저 기본값이에서없는 경우 16px). 이는 html요소 의 브라우저 기본값 font-size이 16px및 10rem* 이기 때문입니다.16px = 160.

안쪽 사각형이 10em큽니다. 부모 요소가 5px정사각형 이기 때문에 5em * 10px = 50px .

이것이 어떻게 유용합니까?

모든 단위를 rem다음과 같은 이점 을 갖도록 설정합니다 .

• 하나의 CSS 미디어 쿼리로 전체 애플리케이션을 확장 할 수 있습니다.이 미디어 쿼리에서 글꼴 크기를 지정할 수 있습니다. 글꼴 크기를 변경하여 단위가있는 모든 요소rem 가 그에 따라 크기가 조정됩니다.
• 사용자가 기본 브라우저를 사용하지 않을 때 16px응용 프로그램의 글꼴 크기는 사용자가 선택한 글꼴 크기로 조정됩니다.

rem, em 및 px는 CSS에서 글꼴 크기의 다른 단위입니다.

em em은 해당 요소의 부모의 계산 된 글꼴 크기와 같습니다. 예 : font-size : 16px, 하위 1em = 16px로 정의 된 div 요소.

렘 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를 사용하려는 경우 참조는 단순히 백분율로 발생하는 것과 유사한 부모 계산 글꼴 크기입니다.

다음 예제에서 헤더 자식 요소의 3em 글꼴 크기는 72 픽셀이됩니다. 이는 부모 글꼴 크기의 세 배인 (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%;
}

rem에 관해서는 항상 루트 글꼴 크기를 참조로 사용하기 때문에 실제로 글꼴 크기와 길이에 대해 동일한 방식으로 작동합니다. 이것은 루트 글꼴 크기가 16이기 때문에 여기에있는 10rem 패딩이 160 픽셀이 될 것임을 의미합니다.

에서는 EM 상대 유닛 폰트 크기의 기부에서 측정된다 가까운 상위 폰트 크기 받는있어서하지만 폰트 크기는 기본 폰트 크기에 의해 다음 부모 요소 중 어떤 정의되지 않은 경우에 정의되는 루트 HTML 요소

REM 상대 유닛 만에 의해 계산된다 루트 HTML 요소 , 즉, 부모 요소의 폰트 사이즈는 영향을 미치지 않는다

CSS 측정 단위 : em , rem 모두 부모 전면 크기에 상대적입니다. 크기는 부모 글꼴 크기에 따라 변경됩니다. 예 :
rem : 루트 요소 글꼴 크기의 100 %.
em : 부모 글꼴 크기의 100 %.