CSS의 px, rem 및 em 단위에 대한 간략한 분석

절대 길이

px

px는 미터나 센티미터와 같이 고정된 길이인 픽셀 값입니다.

상대 길이

왜 상대 길이 rem em 등이 필요한가요?

고정 길이는 더 이상 현재 요구 사항을 충족할 수 없습니다.

예: 화면을 축소할 때 상자의 너비와 높이를 줄여야 할 뿐만 아니라 글꼴 크기도 줄여 사용자 경험이 향상되기를 원합니다.

rem

rem과 px

rem 값 사이의 계산 관계는 px

의 배수입니다. 기본적으로 글꼴 크기 = 16px, 1rem = 16px

rem으로 상대 계산을 수정하는 방법 px Relationship

html 태그의 글꼴 크기만 수정할 수 있고 수정할 수 있습니다(html 노드는 rem의 r: 루트인 루트 노드이기 때문입니다): 32px, 따라서 1rem = 32px

code

<p class="p-rem">rem</p>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.p-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

em px

과의 계산 관계 em의 값은 px

기본적으로 글꼴 크기 = 16px, 그러면 1em = 16px

em px

과의 상대 계산 관계를 수정하는 방법

자신의 요소에서 글꼴 크기를 32px로 수정할 수 있으므로 1em = 32px입니다.

자신의 요소에 글꼴 크기가 설정되지 않은 경우 부모 요소에서 글꼴 크기를 설정하여 사용하는 em에 영향을 줄 수도 있습니다. 자신의 요소(하위 요소) 값입니다.

추천 튜토리얼: "CSS 튜토리얼"

위 내용은 CSS의 px, rem 및 em 단위에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!