CSS에서 px, em, rem 및 pt 간의 차이점과 연결을 비교합니다.

이 글에서는 CSS에서 px, em, rem, pt 간의 특성, 차이점, 변환을 주로 소개합니다. 또한 각 크기 단위가 상위 요소의 크기를 상속하는지, 필요한 경우 브라우저가 호환되는지 자세히 설명합니다.

개념 소개:

1.px(픽셀, 픽셀): 는 가상 길이 단위로, 컴퓨터 시스템의 디지털 이미지 길이 단위입니다. 길이를 지정하려면 정밀한 DPI(인치당 도트 수, 인치당 픽셀 수)를 지정해야 합니다. 스캔 및 인쇄 시 일반적으로 DPI 옵션이 있습니다. Windows 시스템의 기본값은 96dpi이고 Apple 시스템의 기본값은 72dpi입니다.

2.em(상대 길이 단위, 현재 개체의 텍스트 글꼴 크기에 상대적): 원래 문자 M의 너비를 나타내는 상대적 길이 단위이므로 이름이 em입니다. 이제 이는 문자 너비의 배수를 나타내며 사용법은 0.8em, 1.2em, 2em 등과 같은 백분율과 유사합니다. 일반적으로 1em=16px입니다.

3.pt(포인트, 파운드): 는 길이의 물리적 단위로 1/72인치를 나타냅니다. pt=1/72(인치), px=1/dpi(인치)

4.rem(루트 em, 루트 em): 는 CSS3의 새로운 상대 단위로 널리 주목을 받고 있습니다. 이 유닛과 em의 차이점은 무엇인가요? 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대적 크기이지만 HTML 루트 요소에만 상대적이라는 것입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다. 현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다. 이를 지원하지 않는 브라우저의 경우 해결책은 매우 간단합니다. 즉, 추가 절대 단위 설명을 작성하는 것입니다. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다.

1. em과 px에 관한 질문

px이 무엇인가요?

픽셀(픽셀). 상대 길이 단위. 픽셀 px는 모니터 화면 해상도를 기준으로 합니다. (CSS2.0 매뉴얼에서 인용)

em은 상대 길이 단위입니다. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. (CSS2.0 매뉴얼에서 인용)

PX 기능

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

2 대부분의 외국 웹사이트에서 조정할 수 있는 이유는 em 또는 rem을 사용하기 때문입니다. 글꼴 단위로

3. Firefox에서는 px, em, rem을 조정할 수 있지만 중국 네티즌의 96% 이상이 IE 브라우저(또는 커널)를 사용합니다.

em 뭔데요?

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 기능:

1em은 글꼴 크기를 나타내며 상위 요소의 글꼴 크기를 상속하므로 고정된 값이 아닙니다. 모든 브라우저의 기본 글꼴 크기는 16px입니다. 따라서 12px = 0.75em입니다. 실제 애플리케이션에서 변환을 용이하게 하기 위해 스타일은 일반적으로 다음과 같이 설정됩니다.

html {font-size: 62.5% }

이런 식으로 1em = 10px; 일반적으로 사용되는 1.2em은 이론적으로 12px입니다. 그러나 이 변환은 IE 브라우저에서 유지되지 않습니다. 1.2em은 12px보다 약간 큽니다. 해결 방법은 html 태그 스타일의 62.5%를 63%로 변경하는 것입니다. 즉,

html { 글꼴 크기: 63%; }

중국어 기사에서는 일반적으로 문단 시작 부분에 공백이 두 개 있습니다. px 단위를 사용한다면 12px 폰트는 24px, 14px 폰트는 28px를 빼야 하는데... 이 변환은 매우 활용성이 떨어집니다. em 단위를 사용하면 한 단어의 크기가 1em이고, 두 단어의 크기가 2em이면 이 문제를 쉽게 해결할 수 있습니다. 따라서 다음과 같이 정의하세요.

p { text-indent: 2em; }

em과 px 글꼴 단위의 차이점

글꼴 단위는 px가 아닌 em이어야 합니다. IE6에서 글꼴 크기를 조정하려면 페이지에서 Ctrl+스크롤 휠을 누르세요. px 단위 글꼴이 있는 웹사이트는 응답하지 않습니다. px는 절대 단위로 IE 스케일링을 지원하지 않으며, em은 상대 단위입니다.
이 블로그를 조정하다 보니 폰트뿐만 아니라 줄 간격(line-height), 세로 높이 단위까지 모두 em으로 되어 있는 것을 발견했습니다. 확장 시 무결성을 보장합니다.

em에는 다음과 같은 특징이 있습니다.
1. em의 값은 고정되어 있지 않습니다.
2.em은 상위 요소의 글꼴 크기를 상속합니다.

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 현상을 피하세요. 예를 들어 #content에서 글꼴 크기를 1.2em으로 선언한 다음 p의 글꼴 크기를 선언하면 1.2em이 아닌 1em만 가능합니다. 왜냐하면 이 em은 해당 em이 아니고 글꼴을 상속하기 때문입니다. #content의 높이가 1em=12px이 되었습니다.
12px IE:
em 변환을 완료했을 때 이상한 현상도 발견했습니다. 즉, 위의 방법으로 얻은 12px(1.2em) 한자가 IE에서 12px로 직접 정의한 글꼴 크기와 일치하지 않는다는 것입니다. , 그러나 약간 더 큽니다. 바디 선택기에서 62.5%를 63%로 변경하기만 하면 정상적으로 표시됩니다. 그 이유는 IE가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다. 이 현상은 12px 한자에서만 발생하며 영어에서는 발생하지 않습니다. 해결 방법은 style.css의 62.5%를 63%로 바꾸는 것입니다.

2.rem 기능

rem은 CSS3의 새로운 상대 단위(root em, root em)입니다. 이 유닛과 em의 차이점은 무엇인가요? 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대적 크기이지만 HTML 루트 요소에만 상대적이라는 것입니다. 이 단위는 상대적 크기와 절대 크기의 장점을 결합한 것이라고 할 수 있습니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며, 레이어별로 글꼴 크기를 합성하는 연쇄 반응을 피할 수 있습니다. 현재 IE8 이하를 제외한 모든 브라우저는 rem을 지원합니다. 이를 지원하지 않는 브라우저의 경우 해결책은 매우 간단합니다. 즉, 추가 절대 단위 설명을 작성하는 것입니다. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다.

예:

p {font-size:14px; 글꼴 크기:.875rem;}

참고:

사용할 글꼴 단위는 주로 프로젝트에 따라 결정됩니다. 최신 버전의 브라우저에서는 rem을 사용하는 것이 좋습니다. 호환성을 고려하고 싶다면 px를 사용하거나, 두 가지를 동시에 사용하는 것이 좋습니다.

3. 글꼴 변환표

위 내용은 CSS에서 px, em, rem 및 pt 간의 차이점과 연결을 비교합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!