CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법

PHPz

풀어 주다： 2023-09-13 12:26:00

원래의

1381명이 탐색했습니다.

如何使用 CSS Viewport 单位 vw 和 vh 来实现适应平板和手机屏幕的布局

CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법

반응형 웹 레이아웃을 디자인할 때 다양한 장치 화면 크기의 적응 문제를 고려해야 하는 경우가 많습니다. CSS 뷰포트 단위 vw(뷰포트 너비) 및 vh(뷰포트 높이)는 태블릿 및 모바일 화면에 대한 레이아웃 적응성을 달성하는 간단한 방법을 제공합니다.

뷰포트 단위 vw 및 vh는 뷰포트의 너비와 높이를 기준으로 계산됩니다. 여기서 1vw는 뷰포트 너비의 1%와 같고 1vh는 뷰포트 높이의 1%와 같습니다. 이러한 단위를 적절하게 사용하면 다양한 뷰포트 크기에서 요소의 크기와 위치를 쉽게 제어할 수 있습니다.

다음에서는 CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법을 자세히 소개합니다.

기본 스타일 설정

레이아웃을 시작하기 전에 페이지의 기본 스타일이 다양한 기기 화면에 맞게 조정되도록 몇 가지 기본 스타일을 설정해야 합니다. 먼저 body 요소에 다음 스타일을 추가할 수 있습니다.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

로그인 후 복사

이렇게 하면 기본 여백과 패딩이 제거되고 상자 모델이 테두리 상자 모델로 설정됩니다.

vw 및 vh 단위를 사용하여 요소 크기 설정

레이아웃을 디자인할 때 다양한 보기 창 크기에서 페이지 요소의 크기 변경을 고려해야 합니다. 이때 vw, vh 단위를 사용하여 요소의 크기를 설정할 수 있습니다.

.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
  height: 30vh; /* 高度为视窗高度的 30% */
}

로그인 후 복사

너비와 높이를 상대 단위 값으로 설정하면 요소가 다양한 뷰포트 크기에 걸쳐 적절한 비율을 유지하도록 할 수 있습니다.

vw 및 vh 단위를 사용하여 요소 위치 설정

요소의 크기를 설정하는 것 외에도 페이지에서 요소의 위치도 고려해야 합니다. 이때 vw, vh 단위를 이용하여 요소의 위치를 설정할 수 있습니다.

.element {
  position: absolute;
  left: 50vw; /* 左边距为视窗宽度的 50% */
  top: 25vh; /* 上边距为视窗高度的 25% */
}

로그인 후 복사

왼쪽 및 위쪽 속성을 상대 단위 값으로 설정하면 다양한 뷰포트 크기에 걸쳐 요소의 상대 위치가 변경되지 않도록 할 수 있습니다.

미디어 쿼리를 사용하여 레이아웃 조정

미디어 쿼리를 사용하면 다양한 기기 화면 크기에 따라 다양한 스타일이나 레이아웃을 적용할 수 있습니다.

예를 들어 화면 너비가 768px보다 작은 경우 요소의 크기와 위치를 조정할 수 있습니다.

@media (max-width: 768px) {
  .element {
    width: 80vw;
    height: 25vh;
    left: 10vw;
    top: 15vh;
  }
}

로그인 후 복사

이렇게 하면 화면 너비가 768px보다 작은 경우 .element 요소의 크기와 위치가 조정됩니다. 미디어 쿼리의 스타일에 따라 조정됩니다.

요약하자면 CSS 뷰포트 단위 vw 및 vh를 사용하면 태블릿 및 모바일 화면에 대한 레이아웃 적응성을 쉽게 얻을 수 있습니다. 요소의 크기와 위치를 상대 단위 값으로 설정하고 미디어 쿼리를 결합하여 다양한 장치 화면 크기에 맞게 조정함으로써 웹 페이지가 다양한 장치에서 최상의 사용자 경험을 제공하도록 할 수 있습니다.

샘플 코드:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .element {
      width: 50vw;
      height: 30vh;
      position: absolute;
      left: 50vw;
      top: 25vh;
      background-color: red;
    }
    
    @media (max-width: 768px) {
      .element {
        width: 80vw;
        height: 25vh;
        left: 10vw;
        top: 15vh;
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

로그인 후 복사

위는 CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법에 대한 방법 및 샘플 코드입니다. 귀하의 레이아웃 적응 작업에 도움이 되기를 바랍니다!

위 내용은 CSS 뷰포트 단위 vw 및 vh를 사용하여 태블릿 및 모바일 화면에 적합한 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!