CSS에서 px 단위와 em 단위의 차이점

3대 포털을 비롯한 국내 웹사이트는 물론, 중국 웹사이트 디자인 트렌드를 '리딩'하는 블루아이디얼, ChinaUI 등은 모두 글꼴 단위로 px를 사용하고 있다. Baidu만이 조정 가능한 예를 설정했습니다. 바다 반대편에서는 거의 모든 주류 사이트에서 조정 가능한 글꼴 단위로 em을 사용합니다. 예, px는 em보다 사용하기 쉽고 대부분의 독자는 em이 무엇인지, px가 얼마인지 모릅니다. 외국인들이 웹사이트 접근성(Accessibility)을 그토록 중요하게 여기는 것은 뿌리 깊은 인본주의적 정신 때문일 뿐만 아니라, 웹사이트를 강제하는 미국의 508조와 같이 이를 제한하는 법률이 있기 때문일 수도 있습니다. 특정 수준의 접근성을 달성하기 위해.

​핵심 포인트: ​

1. 예전에는 IE에서 px 단위로 글꼴 크기를 조정할 수 없었으나 이제는 거의 모든 IE에서 지원합니다.

2. 대부분의 해외 사이트에서 폰트 단위로 em을 사용하기 때문에 조정이 가능합니다. 3. Firefox에서는 px와 em을 조정할 수 있지만 중국 네티즌의 96% 이상이 IE 브라우저(또는 커널)를 사용합니다.

​픽셀(Pixel). 상대 길이 단위. 픽셀 px는 모니터 화면 해상도를 기준으로 합니다.

​em은 길이의 상대적 단위입니다. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.

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

​

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

1. em의 값은 고정되어 있지 않습니다. 2. em은 상위 요소의 글꼴 크기를 상속받습니다.

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

1. 본문 선택기에서 Font-size=62.5%를 선언합니다. 2. 원래 px 값을 10으로 나눈 다음 단위를 em으로 바꿉니다.

3. 확대된 글꼴의 em 값을 다시 계산합니다. 글꼴 크기를 반복적으로 선언하지 마세요.

즉, 1.2 * 1.2= 1.44 현상을 피하기 위함입니다. 예를 들어 #content에서 글꼴 크기를 1.2em으로 선언한 다음 p의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. 왜냐하면 이 em은 해당 em이 아니고 글꼴을 상속하기 때문입니다. #content의 높이가 1em=12px이 되었습니다.

그러나 12px 한자는 예외입니다. 즉, 위의 방법으로 얻은 12px(1.2em) 한자는 IE에서 12px로 직접 정의한 글꼴 크기와 같지 않고 약간 더 큽니다. 이 문제는 Jorux에 의해 해결되었습니다. Body Selector에서 62.5%를 63%로 변경하면 정상적으로 표시됩니다. 그 이유는 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다. 다른 설명이 있는지는 모르겠습니다.

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