CSS 뷰포트 단위 안내 vw, vh, vmin, vmax
뷰포트 - 백분율 길이, 또는 뷰포트 단위 보다 자주 언급되기 때문에 크기를 정의 할 수있는 반응 형 CSS 단위입니다. 뷰포트의 너비 또는 길이의 백분율로 표시. 뷰포트 단위는 백분율과 같은 다른 응답 형 CSS 단위가 열심히 일하게.
이기는 하지만 W3C의 문서 뷰포트 단위에는 이론에 넣을 수있는 모든 것이 포함되어 있습니다. 매우 자세한 정보는 아닙니다. 따라서이 기사에서는 이러한 CSS 단위 실제로 일하다.
뷰포트 높이 (VH) 및 뷰포트 너비 (폭스 바겐)
W3C 뷰포트를 정의합니다. 같이 “초기 포함 블록의 크기”. 즉, 뷰포트는 영역입니다. 브라우저 창에 포함되어있다. 또는 화면의 다른보기 영역.
그만큼 폭스 바겐 과 VH 단위 실제 뷰포트의 너비와 높이의 백분율을 나타냅니다. 그들은 가치를 가질 수있다. 0에서 100 사이의 값 다음 규칙에 따라
100vw = 뷰포트 너비의 100 % 1vw = 뷰포트 너비의 1 % 100vh = 뷰포트 높이의 100 % 1vh = 뷰포트 높이의 1 %
백분율 단위의 차이
뷰포트 단위와 백분율 단위의 차이점은 무엇입니까? 백분위 수 부모 요소의 크기를 상속받습니다. 뷰포트 단위는 그렇지 않습니다. 뷰포트 단위는 항상 뷰포트 크기의 비율. 결과적으로 뷰포트 단위로 정의 된 요소가 상위 요소의 크기를 초과 할 수 있습니다.
예 : 전체 화면 섹션
전체 화면 섹션 뷰포트 단위의 가장 널리 사용되는 사례 일 것입니다..
그만큼 HTML은 매우 간단합니다.; 우리는 단지 가지고있다. 서로 아래에 세 부분 우리는 그들 각각에게 전체 화면을 덮다. (그러나 그 이상은 아니다).
CSS에서는 100vh ~로서 신장 가치와 100 % 같이 폭. 우리는 폭스 바겐 여기에 단위는 기본적으로, 스크롤 막대도 추가됩니다. 뷰포트 크기에 맞 춥니 다. 그래서 우리가 너비 : 100vw; 규칙 a 수평 스크롤 바 에 나타납니다. 브라우저 창의 아래쪽.
* margin : 0; 패딩 : 0; section background-size : 표지; 배경 위치 : 중심; 너비 : 100 %; 높이 : 100vh; .section-1 background-image : url ( 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); .section-2 background-image : url ( 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'); .section-3 background-image : url ( 'https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');
아래의 gif 데모에서 볼 수 있습니다. VH ~이다. 진정으로 반응하는 단위.
W3C 문서에 따르면, 앞서 언급 한 수평 스크롤 바 문제 에 추가하여 해결할 수 있습니다. 오버플로 : 자동; 규칙을 루트 요소에 추가하십시오. 이 솔루션 부분적으로 만 작동합니다., 그래도. 실제로 수평 스크롤바가 사라지지만 폭 ~이다. 여전히 뷰포트 너비를 기반으로 계산됩니다. (사이드 바 포함), 요소는 약간 더 커야합니다..
나는 감히 말하지 않을 것이다. 폭스 바겐 단위 켜기 전체 화면 요소 크기 조정 이런 이유로. 우리는 그것을 필요로하지 않습니다. 너비 : 100 %; 규칙은 완벽하게 작동합니다. 전체 화면 레이아웃을 사용하면 실제 도전은 항상 적절한 높이 값을 설정하십시오. 그리고 VH 단위는 그것을위한 화려한 해결책을 준다.
기타 사용 사례
관심이있는 경우 기타 유스 케이스 폭스 바겐 과 VH Lullabot에는 훌륭한 기사가 있습니다. 소수의 실제 사례 (Codepen 데모 포함) :
- 고정 비율 카드.
- 요소를 화면보다 짧게 유지하기.
- 텍스트 크기 조정.
- 컨테이너에서 파열.
Opera.dev는 또한 당신이 어떻게 활용할 수 있는지에 대한 간단한 자습서를 가지고 있습니다. 폭스 바겐 ~ 안에있는 단위 반응 형 타이포그래피 제작.
뷰포트 단위를 사용할 수 없습니다. 폭 과 신장 속성을 포함하지만 다른 속성에는 없습니다. 예를 들어 패딩과 여백의 크기 설정 ~을 사용하여 폭스 바겐 과 VH 단위.
뷰포트 최소 (vmin) 및 뷰포트 최대 (vmax)
그만큼 vmin 과 vmax 광고 단위를 이용하면 더 크거나 더 큰면의 크기 다음 규칙에 따라 뷰포트의
100vmin = 100vw 또는 100vh 중 작은 쪽 1vmin = 1vw 또는 1vh 중 작은 쪽 100vmax = 100vw 또는 100vh 중 큰 쪽 1vmax = 1vw 또는 1vh 중 큰 쪽
그래서, 세로 방향, 100vmin 동일하다 100vw, 뷰포트가 수직보다 수평 적으로 작다.. 같은 이유로, 100vmax 같을 것이다 100vh.
유사하게, 가로 방향, 100vmin 동일하다 100vh, 뷰포트가 수평보다 수직으로 작다.. 그리고 물론, 100vmax 같을 것이다 100vw 이리.
예 : 모든 화면에서 영웅 텍스트를 읽을 수 있도록 설정
그만큼 vmin 과 vmax 단위는보다 덜 널리 알려져 있습니다. 폭스 바겐 과 VH. 그러나, 그들은 잘 사용하실 수 있습니다 방향을 대용하다. @미디어 쿼리. 예를 들어, vmin 과 vmax 이상하게 보일 수있는 요소가있을 때 유용 할 수 있습니다. 다른 종횡비에서.
새 코드에는 훌륭한 자습서가 있습니다. 영웅 텍스트를 읽을 수있게해라. 모든 화면에서 vmin 단위. 영웅의 텍스트는보기 쉽다. 모바일에서는 너무 작고 대형 모니터에서는 너무 크다..
해결책에 대한 주요 아이디어는 다음과 같습니다.
h1 font-size : 20vmin; font-family : Avenir, sans-serif; 글꼴 체중 : 900; 텍스트 정렬 : 가운데;
Codepen 데모에서, 당신은 어떻게 체크 아웃 할 수 있습니다 vmin 영웅 텍스트의 가독성 문제를 해결합니다. 액세스 “전체 페이지” Codepen에서보기 브라우저 창 크기 조정 주인공 텍스트가 어떻게 변하는 지 보려면 수평 및 수직 모두.
브라우저 지원
아래의 CanIUse 차트에서 볼 수 있듯이, 브라우저 지원은 상대적으로 좋다. 뷰포트 단위 용. 그러나 일부 버전의 IE와 Edge는 지원하지 않습니다. vmax. 또한 iOS 6 및 7에는 VH 단위, iOS 8에서 수정되었습니다..
