CSS의 px 단위와 em 단위의 차이점에 대한 자세한 설명

px를 사용하여 글꼴을 정의하며 브라우저 글꼴 증폭 기능을 사용할 수 없는 반면 대부분의 해외 웹사이트는 IE 브라우저에서 사용할 수 있습니다.

원인:

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

2. 대부분의 해외 국가에서는 글꼴 단위로 em을 사용합니다.

px, em은 상대적인 길이 단위이고,

px는 디스플레이 해상도에 상대적입니다.

em은 현재 개체의 텍스트를 기준으로 한 글꼴 크기입니다. 현재 개체의 텍스트 글꼴 크기가 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.

모든 브라우저의 기본 글꼴은 16px이며, 설정되지 않은 모든 브라우저는 1em=16px를 준수합니다. 그런 다음 12px=0.75em,10px=0.625em입니다. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 글꼴 크기=62.5%를 선언해야 합니다. 그러면 em 인덱스가 16px*62.5%=10px가 되므로 12px=1.2em, 10px=1em이 됩니다. , 또한 즉, 원래 px 값을 10으로 나눈 다음 em 단위로 바꿉니다.

em은 다음과 같은 특징을 가지고 있습니다.

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

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

따라서 강조할 점은 다음과 같습니다.

1. body 선택기에서 글꼴 크기=62.5%를 선언합니다

2. 원본을 나눕니다. px 값을 10으로 바꿉니다. 그런 다음 em을

단위로 바꿉니다. 3. 글꼴 크기를 반복적으로 선언하지 않도록 확대된 글꼴의 em 값을 다시 계산합니다.

참고:

위 방법으로 얻은 12px(1.2em) 한자는 IE에서 12px로 직접 정의한 글꼴 크기와 같지 않지만 약간 더 큽니다. .

바디셀렉터에서 62.5%~63%로 변경하셔야 정상적으로 표시됩니다.

그 이유는 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다.

위 내용은 CSS의 px 단위와 em 단위의 차이점을 완전히 이해하기 위해 편집자가 소개하는 내용입니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답변할 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

위 내용은 CSS의 px 단위와 em 단위의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!