CSS의 REM : REM 유닛 이해 및 사용

CSS의 Rem Unit에 대한 심층 이해 : 우수한 브라우저 호환성을 갖춘 비교적 큰 장치와 효과적으로 사용하는 방법을 배우십시오. 키 포인트

rem 단위 이해 : root 요소의 글꼴 크기에 비해 CSS rem 단위 학습은 UI의 글꼴 크기 및 간격을위한 일관된 방법을 제공합니다.

REM 및 EM 유닛 비교 :
1. CSS의 REM과 EM 유닛의 차이점을 탐색하면 EM 단위 중첩 섹스와 관련된 복잡성을 피하기 위해 더 단순하고 일관된 크기 조정 방법을 제공합니다. 실제 응용 프로그램 및 접근성 :
반응 형 디자인, 문서를 스케일링하고 네트워크 접근성을 보장하여 사용자가 선호도에 따라 글꼴 크기를 조정할 수 있도록 Rem Unit의 실제 사용을 발견합니다.
2. REM 장치 란 무엇입니까?
CSS에서 REM은 "루트 EM"을 나타냅니다. 이는 루트 요소의 글꼴 크기를 나타내는 측정 단위입니다. 이는 1REM이 HTML 요소의 글꼴 크기와 같고 대부분의 브라우저의 경우 기본값은 16px입니다. REM을 사용하면 UI 전체의 글꼴 크기와 간격의 일관성을 보장 할 수 있습니다.
3. W3C 사양에 따라 REM 장치의 정의는 다음과 같습니다. 는 루트 요소에서 글꼴 크기의 계산 된 값과 같습니다. 루트 요소의 글꼴 크기 속성에 지정된 경우, REM 장치는 속성의 초기 값을 나타냅니다.
rem inits and em units

rem 단위와 EM 장치의 차이점은 루트 요소가 아닌 자체 요소에 비해 EM 장치의 글꼴 크기가 있다는 것입니다. 따라서 계단식 일 수 있으며 예상치 못한 결과로 이어질 수 있습니다. 다음 예를 고려해 봅시다. 루트 글꼴 크기가 기본 16px :

인 경우 목록의 글꼴 크기가 12px를 갖기를 원합니다. 다른 목록에 중첩 된 목록이있는 경우 내부 목록의 글꼴 크기는 부모 크기의 75%가됩니다 (이 경우 9px). 우리는 여전히 다음과 같은 것을 사용 하여이 문제를 극복 할 수 있습니다. 이것은 효과가 있지만, 우리는 여전히 더 깊은 둥지 상황에 큰 관심을 기울여야합니다.

REM 장치의 경우 상황이 훨씬 간단합니다

모든 크기는 루트 글꼴 크기를 나타 내기 때문에 더 이상 별도의 선언으로 중첩 케이스를 처리 할 필요가 없습니다.

글꼴 크기 크기 조정 에 rem 단위를 사용하십시오

rem 단위를 사용한 글꼴 크기의 선구자 중 하나는 Jonathan Snook으로 2011 년 5 월 REM을 사용하여 글꼴 크기 크기 조정에 관한 기사를 발표했습니다. 다른 많은 CSS 개발자들과 마찬가지로, 그는 복잡한 레이아웃에서 EM 장치가 가져온 문제에 직면해야합니다.

당시 IE의 이전 버전은 여전히 ​​시장 점유율이 많았으며 픽셀 크기를 사용하여 텍스트를 확장 할 수 없었습니다. 그러나 앞에서 보았 듯이 둥지를 무시하고 EM 장치를 사용하여 예기치 않은 결과를 얻는 것은 쉽습니다.

글꼴 크기 크기 조정에 REM을 사용하는 데있어 주요 문제는 이러한 값이 사용하기 편리하지 않다는 것입니다. 기본 크기가 16px : 라고 가정하면 Rem Units로 표현 된 일부 일반적인 글꼴 크기의 예를 살펴 보겠습니다.

10px = 0.625rem

12px = 0.75rem

14px = 0.875rem
• 16px = 1rem (벤치 마크) 18px = 1.125rem
20px = 1.25rem
• 24px = 1.5rem 30px = 1.875rem
32px = 2rem
우리가 볼 수 있듯이,이 값은 계산을 수행하는 데 편리하지 않습니다. Snook은 "62.5%라는 기술을 사용합니다. 이것은 EM 단위에서 사용 된 새로운 발견이 아닙니다.
• snook의 솔루션은 다음과 같습니다.
rem 장치는 루트 요소와 관련이 있으므로 Snook의 솔루션은 다음과 같습니다.
• 우리는 또한 REM을 지원하지 않는 다른 브라우저를 고려해야합니다. 위의 코드는 실제로 다음과 같이 작성됩니다.
이 솔루션은 "황금 규칙"의 상태에 가까운 것처럼 보이지만 일부 사람들은 맹목적으로 사용하지 않는 것이 좋습니다. Harry Roberts는 Rem Unit 사용에 대한 자신의 의견을 썼습니다. 그의 견해로는 62.5% 솔루션은 계산을 더 쉽게 만들 수 있지만 (PX의 글꼴 크기는 REM 값의 10 배이기 때문에) 궁극적으로 개발자는 웹 사이트에서 모든 글꼴 크기를 명시 적으로 다시 작성하도록 강요합니다.
• 세 번째보기는 CSS- 트릭의 Chris Coyier에서 나옵니다. 그의 솔루션은 현재 우리가 겪고있는 세 단위를 모두 사용합니다. 그는 px로 정의 된 루트 크기, rem 단위로 정의 된 모듈 및 EM 단위의 모듈 내의 요소를 유지합니다. 이 접근법을 사용하면 모듈의 유형을 조정하는 글로벌 크기를보다 쉽게 ​​조작 할 수 있으며 모듈 내용은 모듈 자체의 글꼴 크기를 기반으로 스케일링됩니다. 루이 라자리스는 나중에이 개념을 "CSS의 EM 유닛의 힘"에서 논의했다.
다음 예에서는 Chris의 방법이 어떻게 보이는지 볼 수 있습니다. [Codepen Sample Link- Codepen의 임베디드 코드는 여기에 삽입해야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다. ] 실제로 Bootstrap 4 및 Material Design Guide와 같은 주요 프레임 워크는 텍스트 콘텐츠를 크기를 조정하기 위해 rem 단위를 사용합니다.
• 특히 언급 해야하는 것은 재료 -UI이며, 이는 매우 인기있는 React 구성 요소 모음입니다. 그들은 같은 방식으로 텍스트를 조정할뿐만 아니라 앞에서 언급 한“10px 단순화”를 달성하는 메커니즘을 제공합니다.
또 다른 최근의 프로젝트 인 모든 레이아웃은 EM과 Rem Unit을 매우 창의적인 방식으로 결합합니다. Chris Coyier의 위에서 언급 한 모델 개요에 가장 가깝고 EM 장치를 사용하여 SVG 아이콘, 스팬 또는 기타 유사한 요소와 같은 인라인 요소를 강조합니다.
• 보시다시피, "다목적"솔루션은 없습니다. 가능한 조합은 개발자의 상상력에 의해서만 제한됩니다.
미디어 쿼리 브레이크 포인트에서

를 사용하십시오 미디어 쿼리에서 EM 또는 Rem Unit의 사용은 "최고의 대통령"이라는 개념 및 독서 경험에 미치는 영향과 밀접한 관련이 있습니다. Smashing Magazine은 웹 조판에 관한 포괄적 인 연구 기사를 발표했습니다. "크기는 중요합니다 : 반응 형 웹 디자인의 균형 선 길이 및 글꼴 크기" 다른 많은 흥미로운 것들 중에서,이 기사는 최고의 행 길이를 추정합니다 : 45 ~ 75-85 자 (공백과 구두점 포함), 여기서 65는 "이상적인"목표 값입니다.

1REM = 1 문자의 대략적인 추정을 사용하여 모바일 우선 접근 방식을 사용하여 단일 열 내용의 텍스트 흐름을 제어 할 수 있습니다.

그러나 미디어 쿼리에서 단위로 사용될 때 REM 및 EM 장치는 흥미로운 세부 사항을 가지고 있습니다. 항상 동일한 값을 1rem = 1em = 브라우저에서 설정 한 글꼴 크기를 유지합니다. 이 동작의 이유는 미디어 쿼리 사양에 설명되어 있습니다 (강조 표시) :

미디어 쿼리의 상대 단위는 초기 값을 기반으로하며, 이는 단위가 선언 된 결과를 기반으로하지 않음을 의미합니다. 예를 들어, HTML에서, 글꼴 크기의 초기 값에 대한 EM 장치는 페이지의 어떤 스타일이 아닌 사용자 에이전트 또는 사용자 선호도에 의해 정의됩니다.

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

이 행동의 예를 간단히 살펴 보겠습니다. [Codepen Sample Link- Codepen의 임베디드 코드는 여기에 삽입해야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다. ] 먼저, HTML에는 뷰포트의 너비를 쓸 요소가 있습니다.

다음으로, 우리는 rem 단위를 사용하고 다른 하나는 EM 장치를 사용하는 두 개의 미디어 쿼리가 있습니다 (단순성을 위해 SASS를 사용) :

.

마지막으로, 우리는 일부 jQuery를 사용하여 페이지의 뷰포트 너비를 표시하고 창 크기가 변경 될 때 값을 업데이트합니다.

우리는 62.5% 트릭으로 시작하여 수정 된 루트 글꼴 크기가 미디어 쿼리에 사용 된 값에 영향을 미치지 않음을 보여줍니다. 브라우저 창의 너비를 변경하면 첫 번째 미디어 쿼리가 320px (20 × 16px)에서 시작하고 두 번째 미디어 쿼리는 480px (30 × 16px)에서 시작한다는 것을 알 수 있습니다. 우리가 선언 한 글꼴 크기 변경은 중단 점에 영향을 미치지 않습니다. 미디어 쿼리 브레이크 포인트 값을 변경하는 유일한 방법은 브라우저 설정에서 기본 글꼴 크기를 수정하는 것입니다.

따라서 미디어 쿼리 중단 점에서 EM 또는 Rem Units를 사용하는 것에는 실제로 차이가 없습니다. Zurb Foundation (현재 작성 당시 v6.5.3)은 미디어 쿼리에서 EM 장치를 사용합니다.

접근성 추구

우리는 루트 글꼴 크기를 기반으로 스케일링하는 기능이 rem 단위를 접근성에 매우 유용하게 만듭니다. Google 개발자는 텍스트 크기 조정에 상대 장치를 사용하는 것이 좋습니다.

인터넷 아카이브의 직원은 경험적 연구를 수행했으며 결과는 많은 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경하는 것으로 나타났습니다. REM 및 기타 상대 장치를 사용하면 웹을 탐색하는 방법에 대한 사용자의 결정을 존중할 수 있습니다.

rem 단위를 사용한 문서 스케일링

rem 단위에서 찾을 수있는 세 번째 용도는 확장 가능한 구성 요소를 구축하는 것입니다. rem 단위의 너비, 여백 및 패딩을 나타내면 루트 글꼴 크기와 동기식으로 자라거나 수축시키는 인터페이스를 만들 수 있습니다. 이 일이 몇 가지 예를 사용하여 어떻게 작동하는지 봅시다.

[CodePen 예제 링크 1- CodePen의 임베디드 코드를 여기에 삽입해야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다. ] [CodePen 예제 링크 2- CodePen의 임베디드 코드는 여기에 삽입해야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다. ] 결론

우리는 여기에서 CSS REM 장치와의 만남을 끝냅니다. 응답 성, 확장 성, 개선 된 읽기 경험 및 더 큰 구성 요소 정의 유연성과 같은 코드에서 이러한 장치를 사용하는 데는 많은 장점이 있음이 분명합니다. Rem Unit은 보편적 인 보편적 솔루션이 아니지만 신중하게 배치하면 수년간 개발자를 괴롭힌 많은 문제를 해결할 수 있습니다. REM의 잠재력을 최대한 발휘하는 것은 우리 각자에 달려 있습니다. 편집자를 시작하고 실험을 수행하며 나머지 사람들과 결과를 공유하십시오.

CSS 크기 단위에 대한 자세한 내용은 다음을 참조하십시오

css 의 길이 단위 이해 새로운 CSS3 상대 글꼴 크기 단위

CSS

의 EM 유닛의 힘 물론 , REM만이 사용 가능한 CSS 장치는 아닙니다. CSS 크기 단위 개요를 확인하십시오. CSS에서 REM에 대한 FAQS

CSS의 REM과 EM 장치의 차이점은 무엇입니까?

CSS에서 REM과 EM 장치의 주요 차이점은 크기의 기준점을 계산한다는 것입니다. 가장 가까운 상위 요소에 대한 EM 장치의 글꼴 크기. 요소를 중첩하는 경우 각 레벨마다 부모의 크기에 따라 다른 글꼴 크기를 가질 수 있으므로 화합물 크기가 발생할 수 있습니다. 반면에 REM은 "Root EM"을 나타냅니다. 루트 요소 (HTML) 와만 관련하여 문서의 어느 곳에서나 사용하는 데 일치합니다. 이로 인해 대형 CSS 파일에서 Rem Unit을보다 쉽게 ​​예측하고 관리 할 수 ​​있습니다.

CSS의 픽셀을 Rem Unit으로 변환하는 방법은 무엇입니까?

픽셀을 Rem Unit으로 변환하려면 문서의 기본 글꼴 크기, 일반적으로 16px (대부분의 브라우저의 기본 크기)를 알아야합니다. 변환 공식은 다음과 같습니다. 대상 픽셀 값/참조 글꼴 크기 = REM 값입니다. 예를 들어, 24px의 글꼴 크기를 원한다면 REM의 동등한 값은 24px/16px = 1.5rem입니다.

글꼴 크기 이외의 속성에 대한 rem 단위를 사용할 수 있습니까?

예, rem 단위는 글꼴 크기뿐만 아니라 길이 값이 필요한 모든 CSS 속성에 사용할 수 있습니다. 여기에는 너비, 높이, 패딩, 마진 및 라인 높이와 같은 속성이 포함됩니다. 이러한 특성에 rem 단위를 사용하면 다양한 화면 크기에 비례하여 비례 적 간격 및 레이아웃을 유지하는 데 도움이 될 수 있습니다.
• 모든 브라우저는 rem 단위를 지원합니까?
예, 모든 최신 브라우저는 Chrome, Firefox, Safari, Edge 및 Internet Explorer 9 이상을 포함한 rem 장치를 광범위하게 지원합니다. 그러나 Rem Unit을 지원하지 않는 이전 브라우저의 경우 픽셀 폴백을 제공 할 수 있습니다.
• rem 단위를 사용하는 방법은 어떻게 반응 형 디자인에 도움이 될 수 있습니까?

  rem 단위는 반응 형 디자인에 매우 유익합니다. REM은 루트 요소와 관련이 있으므로 루트 글꼴 크기를 변경하면 REM에 정의 된 모든 요소를 ​​크기를 조정할 수 있습니다. 이것은 미디어 쿼리로 수행 할 수 있으므로 다른 화면 크기에 대해 다른 글꼴 크기를 제공 할 수 있으므로 디자인을 반응하게 만듭니다.

  REM 장치를 사용하는 것이 접근성에 미치는 영향은 무엇입니까?

  REM 장치를 사용하면 웹 사이트의 접근성을 크게 향상시킬 수 있습니다. 일부 사용자는 가독성을 높이기 위해 브라우저의 기본 글꼴 크기를 조정할 수 있습니다. REM 장치는이 벤치 마크 글꼴 크기와 관련이 있으므로 웹 사이트의 레이아웃 및 간격이 사용자 기본 설정에 따라 조정하여 전체 사용자 경험을 향상시킬 수 있습니다.

  rem 단위로 정의 된 스타일을 재정의하는 방법은 무엇입니까?

  CSS 특이성 또는 중요한 규칙을 사용하여 rem 단위로 정의 된 스타일을 재정의 할 수 있습니다. 그러나 이러한 방법을주의해서 사용하고 대신 커버리지의 필요성을 최소화하는 방식으로 CSS를 구축하는 것이 좋습니다.

  픽셀이나 백분율과 같은 다른 장치와 함께 Rem Unit을 사용할 수 있습니까?

  예, rem 단위는 픽셀 또는 백분율과 같은 다른 장치와 함께 사용할 수 있습니다. 이것은 디자인에 더 큰 유연성을 제공 할 수 있습니다. 예를 들어, 테두리 너비 (텍스트 크기로 스케일링 할 필요 없음) 및 채우기 (필요한) rem 단위에 픽셀을 사용할 수 있습니다.

  rem 단위의 기본 글꼴 크기를 설정하는 방법은 무엇입니까?

  REM 장치의 기본 글꼴 크기는 루트 요소 (HTML)의 글꼴 크기 특성을 사용하여 설정됩니다. 예를 들어, 벤치 마크 글꼴 크기가 10px가 되려면 다음을 사용할 수 있습니다. HTML {font-size : 10px}; 그런 다음 모든 제거 장치는이 크기와 관련이 있습니다.

  CSS에서 Rem Unit을 사용하기위한 모범 사례는 무엇입니까?

  CSS에서 Rem Units를 사용하는 모범 사례는 다음과 같습니다 접근 가능하고 시각적으로 균형을 유지하기 위해 다른 글꼴 크기.

위 내용은 CSS의 REM : REM 유닛 이해 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!