px, em, rem의 차이점과 장점과 단점을 깊이 이해합니다.

페이지 레이아웃을 만들 때 상자의 길이, 너비, 높이를 설정해야 하는 경우가 많습니다. 그러면 이러한 길이, 너비, 높이에는 어떤 단위가 사용됩니까? 실제로 국내 디자인 고수들은 다 px를 선호하는 반면 해외 사이트는 대부분 em과 rem을 선호합니다. 그럼 px, em, rem의 차이점과 장점은 무엇인가요? 각각의 단점? 다음으로 소개하겠습니다. 필요한 친구들이 살펴볼 수 있습니다.

px 기능:

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

2. 대부분의 외국 웹사이트가 글꼴 단위로 em 또는 rem을 사용하기 때문입니다.

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

픽셀. 상대 길이 단위. 픽셀 px는 디스플레이 화면 해상도를 기준으로 합니다. (CSS2.0 매뉴얼에서 인용)

em은 상대 길이 단위입니다. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기(16px)를 기준으로 합니다. (CSS2.0 매뉴얼에서 인용)

모든 브라우저의 기본 글꼴 높이는 16px입니다. 조정되지 않은 모든 브라우저 두부: 1em=16px. 그러면 10px=0.625px입니다. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 글꼴 크기=62.5%를 선언해야 합니다. 그러면 em 값이 16px*62.5%=10px가 됩니다. 즉, 10px=1em이 됩니다. , 원본만 변경하면 됩니다. px 값을 10으로 나눈 다음 단위를 em으로 바꾸면 됩니다.

em 기능:

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

2.em은 parent 레벨 요소의 글꼴 크기입니다.

따라서 CSS를 작성할 때 body 선택기에서font-size=62.5%를 선언하면 원래 px 값을 10으로 나눈 다음 단위를 em으로 대체합니다. em 글꼴 크기의 반복 선언을 피하기 위한 단위의 값입니다.

이는 1.2*1.2=1.44 현상을 피하기 위함입니다. 예를 들어 #content에서 글꼴 크기를 1.2em으로 선언한 다음 p의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. 왜냐하면 이 em은 그 em이 아니고 매우 가변적이기 때문입니다. 1em=12px의 경우 #content의 글꼴 크기를 상속받기 때문입니다.

rem 기능:

rem은 CSS3의 새로운 상대 단위(root em root em)입니다. 이 유닛과 em의 차이점은 무엇인가요? 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대적 크기이지만 HTML 루트 요소에만 상대적이라는 것입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다. 현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다. 이를 지원하지 않는 브라우저의 경우 해결책은 매우 간단합니다. 즉, 추가 절대 단위 설명을 작성하는 것입니다. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다. 예는 다음과 같습니다.

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

참고:

사용할 글꼴 단위의 선택은 주로 프로젝트에 따라 결정됩니다. 단, 사용자 기반이 모두 최신 버전을 사용하는 경우 browser 경우에는 rem을 사용하는 것이 좋습니다. 호환성을 고려하려면 px를 사용하거나 두 가지를 동시에 사용하는 것이 좋습니다.

여기서 px, em, rem 단위 변환 도구를 제공합니다. 주소: http://pxtoem.com/

위 내용은 px, em, rem의 차이점과 장점과 단점을 깊이 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!