>  기사  >  웹 프론트엔드  >  CSS의 길이 단위 변환 분석

CSS의 길이 단위 변환 분석

黄舟
黄舟원래의
2017-07-19 13:34:501648검색

CSS를 작성할 때 가장 일반적으로 사용되는 길이 단위는 px(픽셀)이며, em, pt 등이 자주 보입니다. 실제로 CSS에는 8가지 길이 단위, 즉 px, em, pt, ex, pc, in이 있습니다. , mm, cm.
 1.px: 픽셀은 기기의 길이 단위를 기준으로 하며, 픽셀은 모니터 화면 해상도를 기준으로 합니다.
 예를 들어 WONDOWS 사용자가 사용하는 해상도는 일반적으로 96픽셀/인치입니다. MAC 사용자가 사용하는 해상도는 일반적으로 72픽셀/인치입니다.
 2.em : 상대 길이 단위. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다.
 현재 인라인 텍스트의 글꼴 크기를 수동으로 설정하지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
 3.pt: 점, 길이의 절대 단위.
 4. 예: 상대 길이 단위. 문자 "x"를 기준으로 한 높이입니다. 이 높이는 일반적으로 글꼴 크기의 절반입니다.
 인라인 텍스트의 현재 글꼴 크기를 수동으로 설정하지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
 5.pc: 피카(Pica), 길이의 절대 단위. 우리나라 신형 4호형 크기와 맞먹습니다.
 6. 인치: 인치(Inch), 길이의 절대 단위.
 7.mm: 밀리미터, 길이의 절대 단위입니다.
 8.cm: 센티미터, 길이의 절대 단위입니다.
 그 중: 1in = 2.54cm = 25.4mm = 72pt = 6pc;
우리는 종종 용기 크기의 단위로 px를 사용하는데, 실제로 많은 사람들이 px를 글꼴 크기의 단위로 사용합니다. px를 글꼴 단위로 사용하는 유일한 치명적인 단점은 IE에서 브라우저 글꼴 크기 조정 기능을 사용할 수 없다는 것입니다.
 다만, 개인적으로 px를 폰트 단위로 사용하고 IE에서 브라우저 폰트 스케일링 기능을 사용할 수 없는 단점은 더 이상 중요하지 않다고 생각합니다. IE7과 IE8의 새 버전은 이미 글꼴 크기를 조정하는 대신 기본적으로 웹 페이지 전체를 확대하는 Firefox를 포함하여 전체 웹 페이지의 확대/축소 기능을 지원하기 때문에 길게 누르는 것이 의미가 있습니까? Ctrl + 마우스 중앙 스크롤 IE가 개선되었습니다!

실제로 CSS에는 8개의 길이 단위, 즉 px, em, pt, ex, pc, in, mm, cm; 픽셀(Pixel), 상대 모니터 화면 해상도를 기준으로 한 장치의 길이(픽셀)입니다. 예를 들어 WINDOWS 사용자가 사용하는 해상도는 일반적으로 96픽셀/인치입니다. MAC 사용자가 사용하는 해상도는 일반적으로 72픽셀/인치입니다.
em: 상대 길이 단위. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 현재 인라인 텍스트의 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
예: 상대 길이 단위. 문자 "x"를 기준으로 한 높이입니다. 이 높이는 일반적으로 글꼴 크기의 절반입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
pt: 점, 길이의 절대 단위입니다.
pc: 피카(Pica), 길이의 절대 단위. 우리나라 신형 4호형 크기와 맞먹습니다.
in: 인치, 길이의 절대 단위.
mm: 밀리미터, 길이의 절대 단위입니다.
cm: 길이의 절대 단위인 센티미터입니다.
그 중: 1in = 2.54cm = 25.4mm = 72pt = 6pc;
우리는 흔히 px를 용기의 크기 단위로 사용하는데, 국내에서도 많은 사람들이 px를 글꼴 크기의 단위로 사용하고 있습니다. -size)를 사용하지만 실제로는 px를 사용합니다. 글꼴 단위를 만드는 유일한 치명적인 단점은 IE에서 브라우저 글꼴 크기 조정 기능을 사용할 수 없다는 것입니다. 또는 Ctrl 키를 누른 채 마우스 가운데 휠을 스크롤합니다.
많은 사람들이 html em 단위 사용을 권장합니다. px를 사용하는 데 익숙한 사람들에게는 확실히 그리 편리하지 않습니다. 다음은 참고할 수 있는 몇 가지 변환 공식과 비교표입니다.

위 내용은 CSS의 길이 단위 변환 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.