px와 em 사이의 변환

많은 웹 디자이너가 CSS를 작성할 때 유니버설 선택기에서 글꼴 크기를 설정하는데, 중국어의 경우 일반적으로 12px입니다. 단, IE 브라우저에서는 px 단위의 글꼴 크기를 조정할 수 없습니다. 실제로 em을 단위로 사용하면 이러한 상황을 피할 수 있습니다.

1. em과 px의 차이점:
1. IE에서는 px를 단위로 사용하여 글꼴 크기를 조정할 수 없습니다.

2. Firefox에서는 px와 em을 조정할 수 있습니다.

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

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

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

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

3.em과 px를 변환하는 방법
모든 브라우저의 기본 글꼴 높이는 16px입니다. 수정되지 않은 모든 브라우저는 1em=16px를 준수합니다. 그런 다음 12px=0.75em,10px=0.625em입니다.

글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기 또는 범용 선택기에서 Font-size=62.5%를 전역으로 선언해야 합니다. 또는 여기에서 0.625em을 정의할 수 있습니다. 12px를 직접 정의하면 아무런 효과가 없습니다. 반드시 Font-size=62.5%를 정의하세요!

em 값이 16px*62.5%=10px로 변경되므로 12px=1.2em, 10px=1em이 됩니다. 즉, 원래 px 값을 10으로 나눈 다음 변경하면 됩니다. em을 단위로 합니다.

4. CSS에 em을 적용할 때 주의할 점은 다음과 같습니다.
1. 본문 선택기에 Font-size=62.5%를 선언합니다.

2. 원래 px 값을 10으로 나눈 다음 단위를 em으로 바꿉니다.

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

4. em은 상위 요소의 특성을 상속받을 수 있으므로 1.2 * 1.2= 1.44 현상을 방지합니다. 예를 들어 #content(상위 요소)에서 글꼴 크기를 1.2em으로 선언한 다음 p(하위 요소)의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. that em, it #content의 글꼴 높이를 상속받기 때문에 1em=12px가 됩니다.

그리고 한 가지 주의할 점은 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한된다는 점입니다. 본문 아래에 나오는 12px 글꼴은 직접 정의한 것보다 큽니다. 1. 62.5%를 63%로 변경해야 합니다. 위의 CSS 코드 조정을 통해 귀하의 웹사이트가 사용자 경험 디자인에 한 단계 더 가까워졌다는 것을 알게 될 것입니다.