ATOZ CSS 빠른 팁 : REM 및 EM 가치의 이점

키 포인트

"EM"과 같은 상대 장치를 사용하여 텍스트 크기를 설정하고 요소의 내부 및 외부 간격을 사용하는 것은 특히 반응 형 프로젝트에서 픽셀을 사용하는 것보다 유연합니다. 그러나 "EM"장치는 중첩 요소에 문제가 발생하여 각 둥지 수준에서 기하 급수적으로 성장하거나 수축시킬 수 있습니다. "rem"단위는 글꼴 크기를 설정하는 데보다 신뢰할 수있는 대안입니다. 루트 요소의 글꼴 크기에 따라 항상 계산됩니다. 이것은 중첩 요소에서 "EM"장치를 사용할 때 발생하는 지수 성장 또는 수축을 피합니다.

브라우저 지원, 특히 이전 버전의 Internet Explorer의 경우 JS PolyFill 또는 PX 대안을 사용할 수 있습니다. SASS를 사용하는 경우 하이브리드 매크로 및 기능을 만들어 필요한 REM 크기를 계산하고 백업 계획을 자동으로 제공 할 수 있습니다.

• 이 기사는 ATOZ CSS 시리즈의 일부입니다. 여기에서 시리즈의 다른 항목을 찾을 수 있습니다. 해당 동영상의 전체 텍스트와 스크린 샷 ( pseudo-classes에 대한 비디오)을 볼 수 있습니다.
ATOZ CSS 시리즈에 오신 것을 환영합니다! 이 시리즈에서는 알파벳의 다른 글자로 시작하는 다른 CSS 값 (및 속성)을 탐색합니다. 우리는 때때로 스크린 샷이 충분하지 않다는 것을 알고 있으므로이 기사에서는 REM 및 EM 값 사용에 대한 몇 가지 빠른 팁을 추가했습니다.
r r rem과 em 의 의미 초기 스크린 샷 비디오에서, 우리는

pseudo 클래스에 대해 배웠습니다. 이는 필드를 채워야하는 양식을 스타일링하는 데 사용할 수 있습니다.

형태, 검증 및 스타일 상태는 중요한 주제이지만 를 처음 논의했을 때 그리 많지 않았습니다. REM 측정 단위를 사용하기위한 몇 가지 빠른 팁을 살펴 보겠습니다. 그러나 먼저, 다른 상대 단위를 살펴 보겠습니다. :required em

사용의 장단점 반응 형 항목으로 작업 할 때 EM과 같은 상대 장치를 사용하여 텍스트 크기를 설정하고 요소의 내부 및 외부 간격이 픽셀을 사용하는 것보다 유연합니다. 이 장치는 요소의 크기, 간격 및 텍스트 내용이 부모 요소의 글꼴 크기에 비해 부모 요소의 글꼴 크기에 비례하여 비례 적으로 성장할 수 있기 때문입니다.

이러한 상대 장치를 사용하면 요소의 글꼴 크기 값을 변경하면 하위 요소에 계단식 효과가있는 스케일 시스템을 구축 할 수 있습니다. 비례 시스템은 좋은 일이지만 EM 의이 행동에는 단점이 있습니다. 다음 HTML 코드 스 니펫을 고려하십시오

이 중첩 된 목록은 세계에서 가장 일반적인 것이 아니지만 이용 약관 페이지 또는 기타 유형의 공식 문서에 나타날 수 있습니다.

목록 항목이 눈에 띄기를 원한다면 글꼴 크기를 16px 벤치 마크 크기의 1.5 배로 설정할 수 있습니다.

<code class="language-html"><ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul></code>

그러나 이것은 중첩 된 LI에 문제가 발생하지만 부모 요소 크기의 1.5 배가되므로 중첩 된 LI에 문제가 발생합니다. 중첩 품목은 16px보다 1.5 배가 아닌 24px보다 1.5 배 높습니다. 결과적으로 중첩 된 목록 항목은 각 둥지 수준에서 기하 급수적으로 증가합니다. 이것은 디자이너가 원하는 결과가 아닐 수도 있습니다!

중첩 요소와 EM 값이 1보다 작을 때도 유사한 문제가 발생합니다. 이 경우, 중첩 된 품목은 각 둥지 수준에서 지속적으로 감소합니다.

그래서 우리는 어떻게해야합니까?

rem을 사용하여 텍스트 크기를 설정하십시오 글꼴 크기가 증가하거나 감소하는 것을 피하기 위해 대체 장치를 사용할 수 있습니다.

우리는 픽셀을 사용할 수 있지만 앞에서 언급했듯이 상대 단위는 반응 형 프로젝트에서 더 유연합니다. 대신, 우리는 웹 사이트 또는 웹 응용 프로그램의 경우 일반적으로 HTML 요소 인 루트 요소의 글꼴 크기를 기반으로하기 때문에 Rem Units를 사용할 수 있습니다. .SVG 또는 .XML 문서에서 루트 요소는 다를 수 있지만 이러한 유형의 문서는 현재 범위를 벗어납니다.

우리가 REM을 사용하여 글꼴 크기를 설정한다고해서 EM을 사용하지 않을 것이라는 의미는 아닙니다. 간격이 항상 텍스트 크기와 관련이 있도록 EM을 사용하여 요소 내부의 패딩을 설정하는 경향이 있습니다.

SASS를 사용하여 REM 브라우저 지원 를 돕습니다 rem 단위는 IE9 이상에서만 지원됩니다. IE8 (또는 이전)에 대한 지원이 필요한 경우 JS PolyFill을 사용하거나 다음과 같이 PX 대안을 제공 할 수 있습니다. SASS를 사용하는 경우 하이브리드 매크로와 필요한 REM 크기를 계산하고 자동으로 대체 솔루션을 제공하는 함수를 만들 수 있습니다.

<.> 그게 다야. REM 사용에 대한 몇 가지 빠른 팁. 현재 프로젝트에서 사용하지 않으면 시도해 보는 것이 좋습니다.

CSS의 rem 및 em 값에 대한 faq

CSS의 REM과 EM의 주요 차이점은 무엇입니까?

CSS에서 REM과 EM의 주요 차이점은 크기의 기준점을 계산한다는 것입니다. 가장 가까운 상위 요소 또는 현재 요소에 대한 글꼴 크기. 즉, EM을 사용하여 글꼴 크기를 정의하는 요소를 중첩하면 크기가 복잡해지고 제어하기가 어려워 질 수 있습니다. 한편, REM은 루트 요소 (또는 HTML 요소)와 관련이있다. 즉, 요소가 아무리 깊어지면 REM을 사용하여 글꼴 크기를 정의하면 HTML 요소의 글꼴 크기를 참조하여 웹 사이트에서 일관된 크기를 제공합니다.

CSS에서 EM 대신 REM을 언제 사용해야합니까?

REM은 일반적으로 웹 사이트에서 일관되고 예측 가능한 크기 조정을 만들려면 일반적으로 사용됩니다. REM은 루트 요소와 관련이 있기 때문에 요소가 아무리 깊어지면 크기 조정이 일관성을 유지합니다. 이것은 일관성과 예측 가능성이 중요한 반응 형 디자인을 구축하는 데 특히 유용합니다. 그러나보다 역동적이고 확장 가능한 디자인을 만들려면 요소의 크기가 부모와 관련된 경우 EM을 사용할 수 있습니다.

CSS에서 픽셀을 REM 또는 EM으로 변환하는 방법은 무엇입니까?

픽셀을 REM 또는 EM으로 변환하려면 먼저 문서의 참조 글꼴 크기를 알아야합니다. 이것은 일반적으로 HTML 요소 (일반적으로 16px)에 설정되지만 어떤 값도 할 수 있습니다. 기준 글꼴 크기가 알려지면 원하는 픽셀 값을 참조 글꼴 크기로 나누어 REM 또는 EM 값을 계산할 수 있습니다. 예를 들어, 벤치 마크 글꼴 크기가 16px이고 글꼴 크기가 24px를 원하는 경우 계산은 24 / 16 = 1.5rem 또는 1.5EM입니다.

REM 및 EM 장치를 상호 교환 적으로 사용할 수 있습니까?

REM 및 EM 장치는 모두 CSS의 크기를 정의하는 데 사용될 수 있지만, 기준 포인트가 다르기 때문에 상호 교환 적으로 사용할 수 없습니다. REM은 항상 루트 요소와 관련이 있지만 EM은 가장 가까운 상위 요소 또는 현재 요소와 관련이 있습니다. 이는 동일한 REM 또는 EM 값이 사용되는 컨텍스트에 따라 크기가 다른 크기를 초래할 수 있음을 의미합니다.

브라우저 호환성은 REM 및 EM 장치 사용에 어떤 영향을 미칩니 까?

REM 및 EM 장치는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 브라우저에서 잘 지원됩니다. 그러나 이전 버전의 Internet Explorer (예 : 8 이상)를 지원 해야하는 경우 이러한 브라우저가 Rem Unit을 지원하지 않음을 알고 있어야합니다. 이 경우 픽셀 백업 계획을 사용하거나 브라우저 지원이 더 넓은 EM 장치를 사용하는 것을 고려해야합니다.

REM 및 EM 장치는 접근성에 어떤 영향을 미칩니 까?

REM 및 EM 장치는 사용자 설정을보다 쉽게 ​​확장하고 응답 할 수 있도록 웹 사이트의 접근성을 크게 향상시킬 수 있습니다. 이 단위는 상대적이므로 사용자는 레이아웃을 깨지 않고 선호도에 따라 기준 글꼴 크기를 조정할 수 있습니다. 이는 가독성을 높이기 위해 글꼴 크기를 늘려야 할 시각 장애 사용자에게 특히 유익합니다.

REM 및 EM 장치를 사용하기위한 모범 사례는 무엇입니까?

모범 사례는 rem 단위를 사용하여 글꼴 크기, 여백 및 패딩을 정의하여 웹 사이트의 일관성을 보장하는 것입니다. 드롭 다운 메뉴 또는 툴팁과 같은 상위 요소로 조정 해야하는 요소에는 EM 장치를 사용할 수 있습니다. 또한 벤치 마크 글꼴 크기를 HTML 요소의 백분율로 정의하는 것도 좋습니다.이를 통해 사용자는 선호도에 따라 벤치 마크 글꼴 크기를 조정할 수 있습니다.

REM 및 EM 장치는 미디어 쿼리와 어떻게 작동합니까?

REM 및 EM 장치는 다른 장치와 마찬가지로 미디어 쿼리에 사용할 수 있습니다. 그러나 이러한 장치는 상대적이기 때문에 미디어 쿼리를보다 유연하고 반응이 좋게 만들 수 있습니다. 예를 들어, EM 장치를 사용하여 중단 점을 정의하면 기본 글꼴 크기로 스케일링하여 레이아웃이 사용자 설정에 적응할 수 있습니다.

텍스트 이외의 요소에 REM 및 EM 장치를 사용할 수 있습니까?

예, REM 및 EM 장치는 텍스트뿐만 아니라 CSS의 모든 크기 정의에 사용할 수 있습니다. 여기에는 너비, 높이, 충전, 마진, 테두리 너비 및 포지셔닝이 포함됩니다. 이러한 특성에 REM 및 EM 장치를 사용하면 레이아웃이보다 유연하고 반응이 좋을 수 있습니다.

EM 장치를 사용할 때 중첩 요소를 처리하는 방법은 무엇입니까?

중첩 요소는 크기가 복잡해지기 때문에 EM 장치를 사용할 때 도전 할 수 있습니다. 이를 다루는 한 가지 방법은 중첩 요소의 글꼴 크기를 1EM으로 재설정하는 것입니다. 이는 부모 요소의 글꼴 크기와 동일하게됩니다. 또는 중첩 요소에 Rem Unit을 사용하여 크기 조정의 일관성을 보장 할 수 있습니다.

위 내용은 ATOZ CSS 빠른 팁 : REM 및 EM 가치의 이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!