CSS3에서 레이아웃에 창 단위를 사용하는 방법-JS 튜토리얼-php.cn

CSS3에서 레이아웃에 창 단위를 사용하는 방법

小云云

풀어 주다： 2017-12-13 13:31:13

원래의

1775명이 탐색했습니다.

뷰포트 장치가 나온 지 몇 년이 되었지만 자주 사용되는 경우는 없었습니다. 이제 모든 주요 브라우저에서 지원되고 있으며 특정 상황, 특히 반응형 디자인과 관련된 상황에서 유용하게 사용할 수 있는 고유한 기능을 제공합니다. 이 기사에서는 CSS3의 레이아웃에 창 단위를 사용하는 방법을 주로 공유하여 CSS3에 대한 지식을 더 잘 배울 수 있도록 도움을 드리고자 합니다.

<script>ec(2);</script>

로그인 후 복사

뷰포트 유닛 소개

뷰포트는 브라우저가 실제로 콘텐츠를 표시하는 영역입니다. 즉, 도구 모음과 버튼이 없는 웹 브라우저입니다. 이러한 단위는 vw, vh, vmin 및 vmax입니다. 이는 모두 브라우저(뷰포트) 크기의 비율과 창 크기 조정으로 인한 배율 변경을 나타냅니다.

예를 들어, 1000px(너비) 및 800px(높이)의 뷰포트(Viewport)가 있습니다.

vw - 뷰포트(Viewport)의 너비가 1%임을 나타냅니다. 이 예에서는 50vw = 500px입니다.
vh——창 높이의 백분율 50vh = 400px.
vmin——vmin의 값은 현재 vw와 vh 중 더 작은 값입니다. 이 예에서는 가로 모드이므로 50vim = 400px입니다.
vmax - 큰 크기의 비율입니다. 50vmax = 500px.

너비, 높이, 여백, 글꼴 크기 등 픽셀 값을 사용할 수 있는 모든 곳에서 사용할 수 있습니다. 창 크기를 조정하거나 장치의 브라우저를 회전하여 이러한 값을 다시 계산합니다.

페이지의 전체 높이를 차지합니다

모든 프런트엔드 개발자가 이 작업을 수행합니다. 첫 번째 본능은 다음과 같습니다:

#elem{
height: 100%;
}

그러나 html과 본문에 100% 높이를 추가하지 않으면 여전히 작동하지 않습니다. 왜냐하면 그러한 코드는 우아하지 않기 때문입니다. 나머지 디자인도 망칠 가능성이 높습니다. vh를 사용하면 매우 쉽습니다. 높이를 100vh로 설정하면 항상 창 높이가 됩니다.

#elem{
height: 100vh;
}

이것은 영웅에게 완벽한 전체 화면 이미지인 것 같고 매우 세련되어 보입니다.

하위 요소 크기는 상위 요소가 아닌 브라우저를 기준으로 변경됩니다.

경우에 따라 원하는 것은 하위 요소 크기가 상위 요소가 아닌 창을 기준으로 변경되는 것입니다. 마찬가지로 이전 예에 따르면 이는 작동하지 않습니다.

#parent{
width: 400px;
}
#child{
/* 이는 전체 페이지가 아니라 상위 너비의 100%와 같습니다. */
width: 100%;
}

vw를 사용하여 하위 요소를 설정하면 단순히 오버플로되어 웹 페이지의 전체 너비를 차지하게 됩니다.

#parent{
width: 400px;
}
#child {
/ * 상위 크기에 관계없이 페이지의 100%와 같습니다. */
width: 100vw;
}

반응형 글꼴 크기

뷰포트 단위는 텍스트에서도 사용할 수 있습니다! 이 예에서는 vm을 사용하여 글꼴 크기를 설정하여 멋진 CSS 반응형 텍스트 라인을 만듭니다. 안녕 핏텍스트!

반응형 수직 센터링

요소 뷰포트 단위의 너비, 높이, 여백을 설정하면 다른 트릭을 사용하지 않고도 센터링을 설정할 수 있습니다.

여기 높이가 60vh이고 위쪽 및 아래쪽 여백이 20vh인 직사각형이 있습니다. 합은 100vh(60 2*20)이므로 창 크기가 조정되더라도 항상 중앙에 위치합니다.

#사각형{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}

동일 너비 열

뷰포트 단위를 사용하여 반응형 그리드를 설정할 수 있습니다. 백분율처럼 동작하지만 항상 뷰포트 크기에 상대적입니다. 따라서 창보다 넓은 상위 요소 안에 배치할 수 있지만 그리드는 여전히 필요한 만큼 넓게 유지됩니다. 이렇게 하면 전체 화면 슬라이더를 쉽게 만들 수 있습니다.

이 기술에서는 요소를 float:left로 정렬하여 인접한 요소를 정렬해야 합니다:

.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width : 25vw;
}
.column-8{
float: left;
width: 12.5vw;
}

관련 권장 사항: