VW 대 VH 대 %: CSS에서 언제 뷰포트 관련 단위를 사용해야 합니까?

vh/vw 대 % 이해: CSS의 뷰포트 상대 단위 가이드

% 단위는 요소의 백분율을 측정합니다. 상위 컨테이너와 관련하여 vw 및 vh 단위는 각각 뷰포트의 높이와 너비의 백분율을 측정하도록 특별히 설계되었습니다. 이러한 구별은 요소의 상위 컨테이너가 뷰포트 자체가 아닐 때 매우 중요합니다.

상위 컨테이너의 높이나 너비가 동적이거나 뷰포트와 다른 경우 vw 및 vh 단위는 일관된 크기를 보장합니다. 예를 들어, 높이가 1000px인 상위 div 내에서 요소의 높이가 100%로 설정된 경우 실제 높이는 뷰포트의 크기에 따라 달라질 수 있습니다.

반대로, 동일한 요소를 100vh로 설정하면 항상 상위 div의 크기에 관계없이 뷰포트 높이의 100%를 차지합니다. 이렇게 하면 반응형 웹 디자인에서 크기 조정이 일관되지 않을 가능성이 사라집니다.

이 차이점을 설명하려면 다음 코드 샘플을 고려하세요.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

이 예에서 상위 div 내의 하위 div는 상위 div 높이(200px)의 100%인 높이를 가집니다. 그러나 상위 div의 높이가 변경되더라도 뷰포트 높이 div의 높이는 항상 뷰포트 높이의 100%입니다.

따라서 vw 및 vh 단위를 사용하면 요소 크기 조정을 보다 정확하게 제어할 수 있습니다. 뷰포트와 관련되어 있어 다양한 화면 크기와 종횡비에 원활하게 적응하는 반응형 웹 레이아웃을 만드는 데 특히 유용합니다.

위 내용은 VW 대 VH 대 %: CSS에서 언제 뷰포트 관련 단위를 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!