px, rem, em, vh, vw의 차이점에 대한 심층적인 이해

절대 길이

px

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

상대 길이

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

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

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

rem

rem px

rem 값과의 계산 관계는 px

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

rem px

로 상대 계산 관계를 수정하는 방법은 다음과 같습니다. html 태그의 글꼴 크기만 수정할 수 있고 수정할 수 있습니다(html 노드는 rem의 r: 루트인 루트 노드이기 때문입니다): 32px, 따라서 1rem = 32px

code

<div class="div-rem">rem</div>

/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.div-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 값에 영향을 줄 수도 있습니다. (하위 요소).

rem과 em의 차이점

위 내용은 px, rem, em, vh, vw의 차이점에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!