CSS의 em, px, pt 및 Percent 간의 관계 및 변환

이 글은 주로 CSS Font-Size(em, px, pt, Percent) 사이의 관계와 변환을 소개합니다. 이 글은 도움이 필요한 친구들이 참고할 수 있습니다

1. "Ems". em의 경우 크기는 고정되지 않으며 상대적 단위가 됩니다(본문은 브라우저의 기본 글꼴 설정에 상대적이고 하위 집합은 상위 글꼴에 상대적입니다). 브라우저의 기본 글꼴 크기는 16px이므로 1em = 16px일 수 있습니다. 2em = 32px, 현재 일반적으로 사용되는 글꼴 크기 px는
16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em
2입니다. ,절대라고 불리는 단위는 모바일 단말에서 접근성이 좋지 않습니다
3. "포인트": pt, 크기가 고정되어 있으며 절대 단위이며 인쇄 및 인쇄 매체에 적합합니다.
4. "Percent": %, em과 유사합니다. 백분율로 표현하면 현재 글꼴 크기가 100%입니다. 글꼴을 설정하려면 %를 사용하세요. 모바일 기기에서도 접근성이 좋습니다.
2. 관계
일반적으로 1em=12pt=16px=100%입니다. 다음 예시에서는 본문에 기본 글꼴 크기가 설정되어 있다고 가정합니다.

위 그림에서 볼 수 있듯이 기본 글꼴 크기가 변경됨에 따라 상대 단위인 em과 %는 변경되지만, pt와 px는 변경되지 않습니다. 이것이 웹의 글꼴 설정을 위해 em과 %를 선택한 이유입니다. 문서 텍스트(모바일 접근성도 매우 좋습니다).
3. em과 %, em 및 px 사이의 변환
em의 기능:
1. em의 값은 고정되지 않습니다.
2. Em은 상위 요소의 글꼴 크기를 상속합니다.
다시 작성 단계:
1. 본문 선택기에서 Font-size:62.5%를 선언합니다.
2. 원래 px 값을 10으로 나눈 다음 단위를 em으로 바꿉니다.
위의 두 단계만 필요한 경우 문제가 해결되면 더 이상 px를 사용할 수 없습니다. 위의 두 단계를 수행한 후에는 웹사이트의 글꼴 크기가 예상외로 크다는 것을 알게 될 것입니다. em 값은 고정되지 않고 상위 요소의 크기를 상속하므로 콘텐츠 p의 글꼴 크기를 1.2em(12px)으로 설정할 수 있습니다. 그런 다음 선택기 p의 글꼴 크기를 1.2em으로 설정했지만 p가 콘텐츠의 하위에 속하는 경우 p의 글꼴 크기는 12px가 아니라 1.2em= 1.2 * 12px=14.4px입니다. 이는 콘텐츠의 글꼴 크기가 1.2em으로 설정되어 있기 때문입니다. 이 em 값은 상위 요소 본문의 크기(16px * 62.5% * 1.2=12px)를 상속하고 p는 하위 요소이며 em은 글꼴 높이를 상속합니다. content., 12px입니다. 따라서 p의 1.2em은 더 이상 12px가 아니라 14.4px입니다.
3. 확대된 글꼴의 em 값을 다시 계산합니다. 글꼴 크기를 반복적으로 선언하지 마세요. 즉, 위에서 언급한 1.2 * 1.2 = 1.44 현상을 피하세요. 예를 들어 #main에서 글꼴 크기를 1.2em으로 선언한 다음 p의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. 왜냐하면 이 em은 해당 em이 아니고 글꼴을 상속하기 때문입니다. #content의 높이가 1em=12px이 되었습니다.
이상한 12px 한자
em 변환을 완료하면 이상한 현상이 발견됩니다. 즉, 위의 방법으로 얻은 12px(1.2em) 한자가 IE에서 12px로 직접 정의한 글꼴 크기와 같지는 않지만 살짝 더 작게. 이 문제를 해결했습니다. Body Selector에서 62.5%를 63%로 변경하기만 하면 정상적으로 표시됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS에서 줄바꿈되어 같은 줄에 있지 않은 float:right 오른쪽 정렬 요소 문제를 해결하는 방법

위 내용은 CSS의 em, px, pt 및 Percent 간의 관계 및 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!