CSS에서 px, em, rem의 차이점은 무엇입니까?

차이점: px는 상대적 길이 단위인 픽셀을 나타냅니다. 모니터 화면 해상도를 기준으로 글꼴 크기를 설정합니다. IE 스케일링을 지원하지 않습니다. em은 상위 항목을 기준으로 글꼴 크기를 설정하는 상대적 길이 단위입니다. 요소는 IE 크기 조정을 지원합니다. rem은 HTML 루트 요소를 기준으로 글꼴 크기를 설정하는 상대 길이 단위입니다.

추천 튜토리얼: CSS 비디오 튜토리얼

PX, EM 및 REM의 정의

px는 픽셀을 나타내며 다른 요소의 크기 변경으로 인해 변경되지 않습니다.

픽셀의 크기는 "상대 길이"라고도 알려져 있는 "변경"됩니다. 픽셀이 높을수록 색상 팔레트가 더 풍부해지고 색상이 더 사실적으로 표현될 수 있습니다.

em은 상위 요소를 기준으로 한 글꼴 크기를 나타냅니다. Em은 고정된 측정 값이 없지만 다른 요소의 크기에 따라 결정되는 상대 단위입니다.

em은 현재 개체의 텍스트 글꼴 크기를 기준으로 한 상대적 길이 단위입니다. 인라인 텍스트의 현재 글꼴 크기를 수동으로 설정하지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. 해외에서도 자주 사용되는데요.

모든 브라우저의 기본 글꼴 높이는 16px이고 조정되지 않은 모든 브라우저는 1em=16px을 준수합니다. 그런 다음 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 Font-size=62.5%를 선언해야 하며, 그러면 em 값이 16px*62.5%가 됩니다. =10px ; 이런 식으로 12px=1.2em; 10px=1em, 즉 원래 px 값을 10으로 나눈 다음 em 단위를 변경하면 됩니다.

REM은 상대 단위이며 HTML 루트 요소에 상대적입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다.

CSS 스타일 시트의 px, em, rem 단위의 특징

일반적으로 우리는 글꼴 정의에 px를 주로 사용하기 때문에 브라우저 글꼴 증폭 기능을 사용할 수 없으며, 대부분의 해외 웹사이트는 IE에서 사용할 수 있습니다.

(1) IE는 px 단위를 사용하는 글꼴 크기를 조정할 수 없습니다.

(2) 대부분의 외국 웹사이트가 글꼴 단위를 사용하기 때문입니다.

(3) Firefox에서는 px와 em을 조정할 수 있지만 중국 네티즌의 96% 이상이 IE 브라우저(또는 커널)를 사용합니다.

그렇다면 CSS 단위인 px, em, rem의 특징은 무엇일까요?

1. px의 특징

PX는 실제로 픽셀 크기를 사용하여 글꼴 크기를 설정할 때 더 안정적이고 정확합니다.

하지만 이 방법에는 문제가 있습니다. 브라우저에서 만든 웹 페이지를 사용자가 탐색할 때 브라우저의 확대/축소가 변경되면 웹 페이지의 레이아웃이 깨질 수 있으므로 웹 페이지의 레이아웃이 깨질 수 있습니다. 웹사이트 사용성은 사용자에게 큰 문제입니다.

따라서 "em"을 사용하여 웹 페이지의 글꼴을 정의하는 것이 제안되었습니다.

2.em

EM의 특징은 벤치마크를 기준으로 글꼴 크기를 조정하는 것입니다. EM은 기본적으로 특정 수치가 아닌 상대적인 값입니다. 이 기술에는 일반적으로 "font-size"가 벤치마크입니다. 예를 들어 WordPress 공식 테마 Twentytwelve의 벤치마크는 14px=1em입니다.

일반적으로 em에는 다음과 같은 특징이 있습니다.

(1) em 값은 고정되어 있지 않습니다.

(2) em은 상위 요소의 글꼴 크기를 상속합니다.

따라서 CSS를 작성할 때 다음 세 가지 사항에 주의해야 합니다.

(1), 본문 선택기에서 Font-size=62.5%를 선언합니다.

(2), 원래 px 값을 다음으로 나눕니다. 10. 그런 다음 em을 단위로 교체합니다.

위의 두 단계만으로 문제가 해결되면 누구도 px를 사용할 수 없습니다. 위의 두 단계를 수행한 후에는 em 값이 고정되지 않고 상위 요소의 크기를 상속하기 때문에 웹사이트의 글꼴 크기가 예기치 않게 크다는 것을 알게 됩니다. 콘텐츠에서 글꼴 크기를 1.2em으로 설정할 수 있습니다. div는 12px입니다.

그런 다음 선택기 p의 글꼴 크기를 1.2em으로 설정했지만 p가 콘텐츠의 하위에 속하면 p의 글꼴 크기는 12px가 아니라 1.2em= 1.2 * 12px=14.4px입니다. 콘텐츠의 크기는 1.2em으로 설정되어 있으며, 이 em 값은 상위 요소 본문의 크기(16px * 62.5% * 1.2=12px)를 상속하고, p는 하위 요소로, em은 콘텐츠의 글꼴 높이를 상속하며, 또한 12px입니다. , 따라서 p의 1.2em은 더 이상 12px가 아니라 14.4px입니다.

(3) 글꼴 크기를 반복적으로 선언하지 않으려면 확대된 글꼴의 em 값을 다시 계산하세요.

1.2 * 1.2 = 1.44 현상을 방지하기 위한 것입니다. 예를 들어 #content에서 글꼴 크기를 1.2em으로 선언한 경우 p의 글꼴 크기를 선언할 때 1.2em이 아닌 1em만 가능합니다. , 이것은 em이 아니기 때문입니다. #content의 글꼴 높이를 상속하고 1em=12px가 됩니다.

단, 12px 한자는 예외입니다. 즉, 위의 방법으로 얻은 12px(1.2em) 한자는 IE에서 12px로 직접 정의한 글꼴 크기와 같지 않고 약간 더 큽니다. 이 문제는 해결되었습니다. 본문 선택기에서 62.5%를 63%로 변경하면 정상적으로 표시됩니다. 그 이유는 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다. 다른 설명 및 최적화 방법이 있는 경우(자세한 최적화에 대해서는 Ma Haixiang의 블로그 "효율성을 높일 수 있지만 쉽게 간과되는 CSS 세부 사항 살펴보기"에서 관련 소개를 확인하세요.)

3. rem의 특징

rem은 CSS3에 추가된 새로운 상대 단위(root em, root em)입니다.

EM은 상위 요소를 기준으로 글꼴 크기를 설정하므로 문제가 있습니다. 요소를 설정하려면 상위 요소의 크기를 알아야 하는 반면 Rem은 루트 요소

현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다.

지원하지 않는 브라우저의 경우 해결책은 매우 간단합니다. 즉, 절대 단위 명령문을 추가로 작성하는 것입니다. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다.

다음은 예입니다.

p {font-size:14px; font-size:.875rem;}

CSS 스타일 시트에서 px, em, rem 단위의 차이점

일반적으로 px와 em의 차이점은 px는 절대 단위이며 IE를 지원하지 않는다는 것입니다. 크기 조정의 경우 em은 상대 단위이며 IE 크기 조정을 지원합니다. 실제로 CSS 단위 em, px 및 rem의 차이점은 다음과 같습니다.

1. PX: 픽셀

PX는 상대 길이 단위입니다. 모니터 화면 해상도에 비례합니다.

장점 및 단점: 비교적 안정적이고 정확하지만, 브라우저에서 확대/축소할 때 페이지가 혼란스러워집니다.

2.EM

EM: 상대 길이 단위입니다. EM은 상위 요소를 기준으로 글꼴 크기를 디자인하는 데 사용됩니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.

장점과 단점: EM의 값은 고정되지 않으며 상위 요소의 글꼴 크기를 상속합니다.

PX와 EM 간의 변환:

모든 브라우저의 기본 글꼴 높이는 16px입니다. 수정되지 않은 모든 브라우저는 1em=16px를 준수합니다. 그런 다음 12px=0.75em, 10px=0.625em입니다.

사용하기 쉽도록 em을 사용할 때 일반적으로 CSS의 본문 선택기에서 글꼴 크기=62.5%를 선언합니다(em 값을 16px*62.5%=10px로 설정). 그 후에는 Divide만 사용하면 됩니다. em 값을 얻으려면 px 값을 10으로 늘립니다(예: 12px=1.2em, 10px=1em).

3. REM

REM은 CSS3의 새로운 상대 단위이며 상대 HTML 루트 요소입니다.

이 유닛은 상대 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 글꼴 크기를 레이어별로 합성하는 연쇄 반응을 피할 수 있습니다.

현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 CSS에서 px, em, rem의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!