CSS 단위 `vh`/`vw`와 `%`의 주요 차이점은 무엇입니까?

CSS 단위: vh/vw와 %의 차이점 탐색

소개

In CSS 스타일링의 영역에서는 다양한 단위를 사용하여 요소 크기를 정의할 수 있습니다. 이 중에서 vh와 vw는 보다 일반적인 백분율 단위와의 유사성으로 인해 혼란을 불러일으키는 상대적으로 새로운 단위입니다. 이 기사에서는 고유한 적용 시나리오를 밝히기 위해 이러한 단위 간의 근본적인 차이점을 탐구합니다.

vh 및 vw: 뷰포트의 백분율

질문에서 알 수 있듯이, vh(뷰포트 높이) 및 vw(뷰포트 너비)는 각각 현재 뷰포트 높이와 너비의 백분율을 측정하는 단위입니다. 예를 들어, 100vh는 현재 뷰포트 높이의 100%를 나타냅니다.

백분율 단위(%): 상위 요소에 상대적

vh 및 vw와 달리 백분율 단위 (%)는 상위 요소의 크기를 기준으로 한 값을 나타냅니다. 즉, 100% 높이는 뷰포트 크기에 관계없이 항상 요소 상위 요소 높이의 100%를 나타냅니다.

주요 구별 요소: 뷰포트 종속성

vh/vw와 %의 중요한 차이점은 뷰포트에 대한 종속성에 있습니다. vh 및 vw 단위는 뷰포트에 따라 동적으로 크기가 조정되도록 설계되어 사용자가 브라우저 창의 크기를 조정하거나 다른 장치로 이동할 때 요소 크기가 그에 따라 조정되도록 합니다.

예를 들어 요소의 높이를 100vh로 설정하면 다음이 보장됩니다. 특정 화면 해상도나 장치에 관계없이 뷰포트의 전체 높이를 채웁니다. 반면에 높이 100%는 상위 요소의 높이만 채우므로 상위 요소의 높이가 뷰포트보다 작은 경우 요소 아래에 빈 공간이 남을 가능성이 있습니다.

실제 예

제공된 HTML 및 CSS 코드를 고려하세요. snippet:

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

이 시나리오에서 자식의 높이를 100%로 설정하면 부모 div의 전체 높이(200px)가 채워지고 아래에 빈 공간이 남습니다. 그러나 viewport-height div의 높이를 100vh로 설정하면 부모의 크기나 화면 해상도에 관계없이 뷰포트의 전체 높이를 채우게 됩니다.

결론

vh/vw 및 % 단위는 표면적으로 유사해 보일 수 있지만 뷰포트에 대한 기본 종속성은 이들을 구별합니다. vh 및 vw 단위는 다양한 화면 크기에 원활하게 적응하는 반응형 레이아웃을 생성하여 여러 기기에서 일관된 사용자 경험을 보장하는 데 특히 유용합니다.

위 내용은 CSS 단위 `vh`/`vw`와 `%`의 주요 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!