CSS에는 어떤 단위가 있나요?

CSS 단위는 %, 인치, cm, cm, em, pt, 파운드(1pt는 1/72인치와 동일), 1pc는 12포인트와 같습니다. px, 픽셀(컴퓨터 화면의 한 지점) vw, 전체 화면 너비는 100vw, 전체 화면 높이는 100vh입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

% Percent

인치

cm 센티미터

mm 밀리미터

em

1em은 현재 글꼴 크기와 같습니다.

2em은 현재 글꼴 크기의 두 배와 같습니다.

예를 들어 요소가 16px로 표시되면 2em은 32px입니다.

CSS에서 em은 사용자가 사용하는 글꼴에 자동으로 적응하기 때문에 매우 유용한 단위입니다.

ex ex는 글꼴의 x 높이입니다. (x 높이는 일반적으로 글꼴 크기의 절반입니다.)

pt 포인트(1 pt는 1/72인치와 같습니다.)

pc 12포인트 유형(1 pc는 12포인트와 같습니다.)

px 픽셀(컴퓨터 화면의 포인트) )

vw: (값 1-100), 전체 화면 너비는 화면에 맞게 100vw라는 점을 이해하세요.

Vh: (값 1-100), 전체 화면 높이가 100vh, 적응형 화면이라는 점을 이해하세요.

추가 정보:

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입니다. 실제 애플리케이션에서 변환을 용이하게 하기 위해 스타일은 일반적으로 다음과 같이 설정됩니다.

CSS code

html {font-size: 62.5% }

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

CSS code

html { 글꼴 크기 : 63%; }

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

CSS code

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%로 바꾸는 것입니다.

A px, em, pt 단위 변환 도구:

주소: http://pxtoem.com/

2.rem 기능

    rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

예:

p {font-size:14px; :.875rem;}

주의:

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

위 내용은 CSS에는 어떤 단위가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!