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

Program / 글쓴이

웹 사이트 소스에서 가끔 개발자들이 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>

스 니펫 확장

위의 예에서 녹색 사각형은 160×160 픽셀입니다 (브라우저 기본값이에서없는 경우 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