html px em pt 길이 단위 사용법 이해

html px em pt 단위 면적

1. PXEMPT 단위 소개 - TOP

px 단위명은 pixel, 상대적인 길이 단위, 픽셀(px)은 모니터 화면 해상도에 따른 기준 국내 추천;
em단위 이름은 상대 길이 단위입니다. 현재 개체의 텍스트 글꼴 크기에 비해 해외에서 더 많이 사용됩니다. 확장 읽기: html em 태그, html em 강조 태그
pt단위 이름은 Point(포인트), 절대 길이입니다. 단위는 일반적으로 길이 테이블의 이전 버전입니다. 크기 단위가 사용되지만 현재는 기본적으로 사용되지 않습니다.

html 단위에 대한 간략한 소개:

Px 픽셀 상대 길이 단위.
Pt 점; 절대 길이 단위
Em 상대 길이 단위. 여기서 em은 html 태그의 "EM"과 정확히 동일하며 여기서 em은 별도의 텍스트 단위로 사용됩니다.

1. 예전에는 px 단위로 사용했던 글꼴 크기를 IE에서 조정할 수 없었는데, 이제는 거의 IE에서 지원하고 있어 대부분의 해외 웹사이트에서 PX 단위를 사용하는 것을 권장하고 있습니다. 조정은 em을 글꼴 단위로 사용한다는 것입니다.

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

픽셀(픽셀). 상대 길이 단위. 픽셀 px는 모니터 화면 해상도에 상대적이며 QQ 스크린샷도 PX를 길이와 너비 단위로 사용합니다.

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

2. HTML 단위 비교 사례 -

TOP

1. 간단한 예:

너비: 300픽셀 너비: 300pt 너비는 300포인트
너비: 300em 너비는 300입니다.
위의 예 동일한 값에 대해 다른 단위 설정

2. 효과를 보려면 텍스트 em px pt 단위에 대해 다른 길이를 설정하세요.

CSS 코드:

.pcss5-px {
    font-size:12px
}
.pcss5-pt {
    font-size:12pt
}
.pcss5-em {
    font-size:2em
}

HTML 코드:

<p class="pcss5-px">
    我是pcss5
</p>
<p class="pcss5-pt">
    我是pcss5
</p>
<p class="pcss5-em">
    我是pcss5
</p>

3.

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

12px는 9pt 길이에 해당합니다.

12px는 0.75em 길이에 해당합니다. 9pt는 0.75em 길이에 해당합니다. 일반적으로 em을 사용하여 px로 변환합니다.

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

구체적인 사용 시간: 모든 HTML 태그에 대해 초기 글꼴 크기=62.5%를 선언합니다.
예:

*{font-size=62.5%}

그런 다음 다음 기술에 따라 후속 레이아웃을 설정할 수 있습니다. em 단위 font-size: 1.2em은 글꼴 크기: 12px와 같습니다. font-size: 1.4em은 글꼴 크기: 14px와 같습니다.
비유하자면, 초기 글꼴 크기=62.5% 이후에는 em과 px 단위는 10배에 불과합니다. 간격은 em 길이 값의 계산 및 설정을 용이하게 하는 데 사용됩니다.

4. em 단위는 다음과 같은 특징을 가지고 있습니다: -
TOP


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

　2. em은 상위 요소의 글꼴 크기를 상속합니다. CSS를 작성할 때 em을 단위로 사용하려면 다음 두 가지 사항에 주의해야 합니다:

　1. 본문 선택기에서 Font-size=62.5%를 선언합니다.

　2. 원래 px 값을 다음으로 나눕니다. 10 그런 다음 em을 단위로 바꿉니다.

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

　1.2 * 1.2= 1.44 현상을 피하기 위함입니다. 예를 들어, #content에서 글꼴 크기를 1.2em으로 선언하면 선언된 글꼴 크기는 1.2em이 아닌 1em만 될 수 있습니다. 왜냐하면 이 em은 해당 em이 아니고 #의 글꼴 높이를 상속하기 때문에 변경되기 때문입니다. 1em=12px의 경우.

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

5. 권장 웹페이지 단위 - TOP

따라서 단위 변환 오류를 방지하기 위해웹페이지 제작 단위는 PX(픽셀) 사용을 권장합니다.

위에서는 px em pt 단위와 변환 방법을 소개합니다. 일반적으로 우리가 사용하는 길이 단위는 px를 길이 단위로 사용합니다. 여기서도 웹페이지의 크기 및 길이 단위로 px(픽셀)를 사용하는 것이 좋습니다. 이는 브라우저의 픽셀 단위와 일치하고 길이와 크기 계산의 편의를 위해 사용됩니다.

px pt em 단위 요약 정보 - TOP

1) 권장 px 픽셀 단위: 일반적으로 px(픽셀 단위)를 더 많이 사용하고 그 다음에는 em 단위를 사용하며 일반적으로 모든 사람이 px를 단위로 사용하는 것이 좋습니다.
2 ) , 우리의 디스플레이 해상도는 px 픽셀입니다.
3) QQ 스크린샷도 px 픽셀입니다.

위 내용은 html px em pt 길이 단위 사용법 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!