CSS 뷰포트: vh 및 vmax를 사용하여 적응형 화면 높이를 만드는 방법

CSS 뷰포트: vh 및 vmax를 사용하여 적응형 화면 높이를 만드는 방법

현대 웹 디자인에서 적응형 레이아웃은 필수 기술이 되었습니다. 기기마다 화면 크기와 해상도가 다르기 때문에, 다양한 기기에서 어떻게 페이지를 잘 표시할 수 있을지 고민이 됩니다.

CSS에서 뷰포트는 웹 페이지의 레이아웃과 표시를 제어하는 ​​데 사용되는 중요한 요소입니다. 뷰포트는 웹 페이지의 너비, 높이, 확대/축소 비율 및 기타 관련 속성을 정의하는 웹 페이지 보기의 창으로 간주할 수 있습니다. 이 글에서는 뷰포트의 vh 및 vmax 단위를 사용하여 적응형 화면 높이를 구현하는 방법을 소개합니다.

vh(뷰포트 높이)는 뷰포트 높이의 백분율 단위로, 뷰포트 높이에 대한 특정 비율을 나타냅니다. 예를 들어 요소의 높이가 50vh로 설정된 경우 요소 높이는 뷰포트 높이의 50%를 차지합니다.

vmax는 Viewport의 최대 크기 값을 나타내며, vh와 vw(뷰포트 너비) 중 더 큰 값입니다. 즉, vmax는 뷰포트의 너비와 높이 중 더 큰 값을 기준으로 값을 결정할 수 있습니다.

다음으로 샘플 코드를 사용하여 vh 및 vmax를 사용하여 적응형 화면 높이를 만드는 방법을 보여드리겠습니다.

먼저 HTML 헤더의 e8e496c15ba93d81f6ea4fe5f55a2244 태그에 다음 코드를 추가하여 브라우저에 뷰포트를 설정하라고 지시해야 합니다. e8e496c15ba93d81f6ea4fe5f55a2244标签中添加以下代码，用于告诉浏览器对Viewport进行设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后，在CSS样式表中，我们可以通过如下方式来使用vh和vmax单位：

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 4vmax;
}

在上面的示例代码中，我们创建了一个高度为100vh的容器（.container），并在其中居中显示了一个文本（.text）。容器采用了display: flexrrreee

그런 다음 CSS 스타일 시트에서 다음과 같이 vh 및 vmax 단위를 사용할 수 있습니다.

rrreee

위 예제 코드에서는 높이가 100vh인 컨테이너(.container)를 생성하고 그 중앙에 텍스트(.text)를 표시했습니다. 컨테이너는 display: flex 속성을 ​​사용하여 수직 및 수평 중앙 정렬을 구현합니다. 또한 텍스트의 글꼴 크기는 4vmax로 설정되어 뷰포트의 높이와 너비 중 더 큰 크기에 맞게 동적으로 조정됩니다.

위 CSS 코드를 사용하면 화면 높이에 맞는 레이아웃을 구현할 수 있습니다. 이 레이아웃은 장치의 화면 크기에 따라 다양한 장치에서 보기 좋게 보입니다.

요약하자면, vh 및 vmax 단위를 사용하면 화면 높이에 맞는 레이아웃을 만드는 데 도움이 될 수 있습니다. 요소의 높이를 vh 단위로 설정하면 해당 요소가 뷰포트 높이의 일부를 차지하도록 할 수 있습니다. vmax 단위를 사용하면 뷰포트의 더 큰 너비와 높이를 기준으로 요소의 크기를 동적으로 조정할 수 있습니다. 🎜🎜이 글의 소개와 샘플 코드를 통해 vh 및 vmax 단위를 더 잘 이해하고 사용하여 더 나은 적응형 웹 페이지 레이아웃을 얻을 수 있기를 바랍니다. 실제 프로젝트 개발에서 특정 요구 사항과 디자인 요구 사항에 따라 vh, vmax 및 기타 CSS 속성을 결합하여 보다 유연하고 아름다운 웹 페이지 레이아웃을 만들 수 있습니다. 🎜

위 내용은 CSS 뷰포트: vh 및 vmax를 사용하여 적응형 화면 높이를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!