CSS 단위 - REM 또는 EM

6018 단어 scsscss
상대 단위는 부모 요소 또는 창 크기(단위에 따라 다름)를 기준으로 크기가 조정되기 때문에 반응형 사이트의 스타일 지정에 사용됩니다. 스타일 지정에 상대 단위를 사용할 때 다른 화면 크기에 대해 모든 스타일을 업데이트할 필요가 없습니다.

💰: Start your cloud journey with $100 in free credits with DigitalOcean!
% , ch , vh , vw , vmin , vmax 또는 ex 와 같이 REM 및 EM보다 더 많은 상대 단위가 있습니다. |

웹 개발 커뮤니티에서 EM과 REM의 사용에 대해 논란의 여지가 있는 토론이 진행 중입니다. 이러한 옵션 중 어떤 것이 가장 적합한지 항상 명확하지 않기 때문입니다.

CSS 단위에 대한 자세한 내용을 보려면 이 기사CSS Units explained를 확인하십시오.

여자 이름

em has it`s origin in the typography world and allows setting the font-size of an element relative to the font-size of its parent. Let's have a look at an example:


.parent {
font-size: 24px;
}
.child {
font-size: 0.5em;
}

The font-size in the parent is 24px, in the child the font-size would be 12px, because 24px x 0.5em = 12px. If the parent element doesn't have a specified font-size, it goes higher up the DOM tree. If no font-size is specified, it will get the browsers default font-size of 16px. EM units are not limited to font-size, you can use them on padding, margin, width, height, and many more properties.

Let's update the example from above with a margin.


.parent {
font-size: 24px;
}
.child {
font-size: 0.5em;
margin-top: 1em;
padding: 0.5em 0;
}

We have calculated the font-size of the child, it's 12px. So the margin-top should be 24px? No, the font-size logic doesn't apply on other properties. When an em unit are used on other properties than font-size , it is relative to the font-size of the element itself. When used on font-size, the size is relative to the font-size of the parent.

For our example this would mean the following:


.parent {
font-size: 24px;
}
.child {
font-size: 12px;
margin-top: 12px;
padding: 6px 0;
}

There is one thing, which really can cause pain when using em in your project, the Compounding Effect.

When multiple em-font-sized elements are within one another, the relative to font-size can be compounding. Let's look at the basic css example:

`
.parent {
font-size: 24px;
}
.child {
font-size: 0.5em;
}

24px

12px (expected)

  I'm 6px (0.5rem of parent)

    I'm 3px (0.5rem of parent)

`

As you can see above the relative to parent logic of em can cause some issues. For that reason rem was created.

렘

REM stands for root em 및 rem는 요소인 html(루트) 글꼴 크기에만 상대적입니다. 루트 html이 지정되지 않은 경우 브라우저 기본값인 16px가 사용됩니다. 따라서 이는 부모 요소의 값을 무시하고 루트의 값만 고려한다는 것을 의미합니다.

위의 예를 살펴보겠습니다. 하지만 rem 를 사용하면 다음과 같습니다.
`
.html {
font-size: 18px;
}
.parent {
font-size: 24px;
}
.child {
font-size: 1rem;
}

24px

18px (as expected, html root is 18px)

  18px (as expected, html root is 18px)

    18px (as expected, html root is 18px)

`

Using REM units allows to avoid the compounding effect of em units. With REM units we have a consistent styling based on the root element, no surprises. When using REM on other values like margin, padding, size, etc. it will still be relative to the font-size of the root element. I personally prefer REM units. 😉

TL;DR

  • Use relative units, when your project requires responsiveness.
  • EM units are relative to the parent or to itself.
  • REM units are relative to the html root element.
  • Use REM to avoid the compound effect

Thanks for reading and if you have any questions , use the comment function or send me a message .

If you want to know more about CSS, have a look at these Gatsby Tutorials.

References (and Big thanks):W3C,Jess Mitchell,thenewcode,alligator.io
HTML, CSS 및 Javascript를 사용하여 반응형 탐색 모음 및 햄버거 메뉴를 빌드해 보겠습니다.
자바스크립트 화살표 함수

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage