CSS 뷰포트 단위 vw 및 vmin을 사용하여 다양한 화면 너비에 맞게 레이아웃을 조정하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 뷰포트 단위 vw 및 vmin을 사용하여 다양한 화면 너비에 맞게 레이아웃을 조정하는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 am 10:58 AM

css viewport 폭스바겐 유닛 vmin 단위

如何使用 CSS Viewport 单位 vw 和 vmin 来实现适应不同屏幕宽度布局

CSS 뷰포트 유닛 vw 및 vmin을 사용하여 다양한 화면 너비에 맞는 레이아웃을 구현하는 방법

모바일 장치의 인기로 인해 반응형 디자인은 오늘날 웹 디자인의 표준 중 하나가 되었습니다. 다양한 화면 크기와 해상도에서 웹 콘텐츠를 효과적으로 표시하는 것이 특히 중요합니다. CSS 뷰포트 단위 vw(뷰포트 너비 단위) 및 vmin(뷰포트 너비 및 높이의 더 작은 단위)은 다양한 화면 너비에 맞게 레이아웃을 조정하려는 목표를 달성하는 데 도움이 될 수 있습니다.

레이아웃에 vw 단위 사용
뷰포트는 사용자가 실제로 웹페이지를 탐색하는 브라우저의 영역을 나타냅니다. vw 단위는 뷰포트 너비에 상대적이며 1vw는 뷰포트 너비의 1%와 같습니다. vw 단위를 사용하면 뷰포트 너비에 따라 요소의 크기를 조정할 수 있습니다.

예를 들어 요소 너비를 뷰포트 너비의 절반으로 설정할 수 있습니다.

.element {
  width: 50vw;
}

로그인 후 복사

뷰포트 너비가 1000px이면 요소 너비는 500px이 됩니다.

레이아웃에 vmin 단위 사용
vw 단위 외에도 vmin 단위를 사용하여 뷰포트의 너비와 높이 중 더 작은 크기를 기준으로 요소의 크기를 조정할 수도 있습니다. 이는 고정된 종횡비로 정사각형이나 요소를 구현하는 데 유용합니다.

예를 들어 요소의 너비와 높이를 뷰포트 너비와 높이 중 작은 값의 20%로 설정할 수 있습니다.

.element {
  width: 20vmin;
  height: 20vmin;
}

로그인 후 복사

뷰포트 너비가 1000px이고 높이가 800px인 경우 요소의 너비와 높이는 요소 둘 다 160px입니다.

vw 및 vmin 단위를 사용하여 다양한 화면 너비에 맞는 레이아웃을 구현하는 예
다음은 vw 및 vmin 단위를 사용하여 다양한 화면 너비에 맞는 레이아웃을 구현하는 방법을 보여주는 예입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }
    
    .box {
      width: 20vmin;
      height: 20vmin;
      background-color: orange;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

로그인 후 복사

위 예에서 우리는 컨테이너 div를 사용하는 경우 4개의 상자 div를 5px 간격으로 한 줄로 배치합니다. 상자의 너비와 높이는 모두 뷰포트 너비와 높이 중 작은 값의 20%입니다. 이는 상자가 화면 너비에 관계없이 비례적으로 맞춰진다는 것을 의미합니다.

요약
CSS 뷰포트 단위 vw 및 vmin은 웹 페이지를 디자인할 때 다양한 화면 너비 레이아웃에 적응하려는 목표를 달성하는 데 도움이 될 수 있습니다. 이러한 단위를 사용하면 뷰포트의 크기에 따라 요소의 크기와 레이아웃을 조정할 수 있어 반응형 디자인이 가능해집니다. 사용자가 대형 화면 모니터, 노트북 또는 모바일 장치를 사용하든 우리는 귀하의 웹 콘텐츠가 아름답고 잘 표현되도록 보장합니다.

참고: vw 및 vmin 단위를 사용할 때 다양한 장치에서 올바른 표시를 보장하려면 다양한 브라우저의 호환성 문제를 고려해야 합니다.

위 내용은 CSS 뷰포트 단위 vw 및 vmin을 사용하여 다양한 화면 너비에 맞게 레이아웃을 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.