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) 대부분의 외국 웹사이트가 글꼴 단위를 사용하기 때문입니다.

1. px의 특징

2.em

단, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!