>  기사  >  웹 프론트엔드  >  CSS의 px 단위와 em 단위의 차이점에 대한 자세한 설명

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

高洛峰
高洛峰원래의
2017-03-08 13:22:092168검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.