집 > 기사 > 웹 프론트엔드 > HTML에는 어떤 측정 단위가 있습니까?

HTML에는 어떤 측정 단위가 있습니까?

php中世界最好的语言원래의: 2017-11-23 15:06:144061검색

HTML에는 세 가지 측정 단위가 있는데, 하나는 px, 단위 이름은 pixel, 두 번째는 em, 단위 이름은 상대 길이 단위, 세 번째는 pt, 단위 이름은 포인트(Point)로 분석하겠습니다. 이 세 가지 단위의 기능은 무엇인가요?

px 단위 이름은 상대적인 길이 단위입니다. 픽셀(px)은 모니터 화면 해상도에 상대적인 단위입니다.

em 단위 이름은 상대적인 길이 단위입니다. . 현재 object에 있는 텍스트의 글꼴 크기에 비해 해외에서 더 많이 사용됩니다. 확장 읽기: html em 태그, html em 강조 태그

pt 단위 이름은 포인트(Point)이며 절대 길이 단위는 일반적으로 이전 버전의 테이블에서 사용되는 단위는 이제 거의 사용되지 않습니다.

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

Px 픽셀 상대 길이 단위.

Pt 점; 절대 길이 단위

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

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

3. Firefox에서는 px와 em을 조정할 수 있지만 중국 네티즌의 96% 이상이

IE 브라우저

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

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

html 단위 비교 사례

1. 간단한 예:

Width: 300px 너비는 300픽셀

Width: 300pt 너비는 300포인트

Width: 300em 너비는 300 상대 길이

위에서 설정했습니다. 동일한 값

효과를 보려면 em px pt 단위로 텍스트 길이를 다르게 설정하세요.

CSS 코드:

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

HTML 코드:

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

em에서 px로의 변환

모든 브라우저의 기본 글꼴 높이는 16px( 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 길이에 해당합니다.

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

와 같습니다. 초기 Font-size=62.5%, em px 단위와 10배 차이만 있어 em 길이 값을 계산하고 설정하기가 더 쉽습니다.

em 단위에는 다음과 같은 특징이 있습니다:

　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가 한자를 처리할 때 부동 소수점 값의 정확도가 제한되기 때문일 수 있습니다. 다른 설명이 있는지는 모르겠습니다.

웹페이지 권장 단위

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

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

px pt em 단위 요약 정보

1) px 픽셀을 단위로 사용하는 것이 좋습니다. 일반적으로 우리는 px(픽셀 단위)를 더 많이 사용하고 그 다음에는 em 단위를 사용합니다. 일반적으로 모든 사람이 px를 단위로 사용하는 것이 좋습니다. 2) 디스플레이 해상도는

3) QQ 스크린샷도 px 픽셀입니다.

여기서 HTML의 단위를 소개하겠습니다. 더 흥미로운 정보를 원하시면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해주세요!