HTML5에서 px와 em의 차이점은 무엇입니까

차이점: 1. 단위 길이가 다릅니다. px는 디지털 이미지 길이의 단위이고 em은 문자 너비의 배수입니다. 2. 상대적 개체가 다르며 px는 모니터 화면 해상도에 상대적이며 em은 현재 개체 글꼴 크기의 텍스트를 기준으로 합니다. 3. px 값은 고정되어 있으며 사용자가 지정하는 값이므로 계산이 더 쉽습니다. em 값은 고정되지 않으며 em은 상위 요소의 글꼴 크기를 상속합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

PX

픽셀(Pixel). 픽셀 px는 모니터 화면 해상도를 기준으로 합니다.

PX 기능

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

2. 대부분의 외국 웹사이트에서 글꼴 크기를 조정할 수 있는 이유는 em 또는 rem을 글꼴 단위로 사용하기 때문입니다. Firefox는 px, em, rem을 조정할 수 있지만 중국 네티즌의 96% 이상이 IE 브라우저(또는 커널)를 사용합니다.

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

EM 기능

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

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

px와 em의 차이점:

1. 단위 길이가 다릅니다

px는 디지털 이미지의 길이 단위이고, em은 문자 너비의 배수입니다.

2. 다양한 상대 객체

px는 모니터 화면 해상도에 상대적이고, em은 현재 객체의 텍스트 글꼴 크기에 상대적입니다.

3. 다양한 값 ​​

px 값은 사용자가 지정하는 값으로 고정되어 있어 계산하기가 더 쉽습니다. em의 값은 고정되어 있지 않으며 em은 상위 요소의 글꼴 크기를 상속합니다.

참고: 모든 브라우저의 기본 글꼴 높이는 16픽셀입니다. 수정되지 않은 모든 브라우저는 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으로 변경하기만 하면 됩니다.

따라서 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이 되었습니다.

관련 추천: "

html 비디오 튜토리얼

"

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