CSS에서 vw는 길이 단위이고, 뷰포트 단위는 뷰포트를 기준으로 한 너비를 나타냅니다. 뷰포트는 vw의 100개 단위로 균등하게 나누어지며, 1vw는 뷰포트 너비의 1%와 같습니다. 브라우징 브라우저의 너비는 1920px이고 "1vw=1920px/100=19.2px"입니다.
(추천 튜토리얼: CSS 동영상 튜토리얼)
뷰포트 단위(Viewport Units)
뷰포트란 무엇인가요?
PC 측에서 뷰포트는 브라우저의 가시 영역을 의미합니다.
모바일 측에는 3개의 뷰포트가 포함됩니다: Layout Viewport(레이아웃 뷰포트), Visual Viewport(시각적 뷰포트), Ideal Viewport(이상적) 뷰포트).
뷰포트 단위의 "뷰포트"는 PC 측 브라우저에서 보이는 영역을 의미하고, 모바일 측에서는 뷰포트의 레이아웃 뷰포트를 의미합니다.
CSS3 사양에 따르면 뷰포트 단위는 주로 다음 4개 단위를 포함합니다.
1.vw: 뷰포트 너비를 기준으로 뷰포트는 vw의 100개 단위로 나뉘며, 1vw는 너비의 1%와 같습니다. 뷰포트 너비.
2.vh: 뷰포트 너비를 기준으로 뷰포트는 vh 단위로 100개로 나뉘며, 1vh는 뷰포트 높이의 1%와 같습니다.
3.vmin: vw와 vh 중 가장 작은 것을 선택하세요.
4.vmax: vw와 vh 중 가장 큰 것을 선택합니다.
vw 및 vh
의 전체 이름은 뷰포트 너비(Viewport Width) 및 뷰포트 높이(Viewport Height)입니다. 창의 너비와 높이는 화면 너비와 높이의 1%에 해당합니다.
vh 및 vw: 상위 요소가 아닌 뷰포트를 기준으로 한 높이 및 너비(CSS 백분율은 이를 포함하는 가장 가까운 상위 요소의 높이 및 너비를 기준으로 함) 1vh는 뷰포트 높이의 1/100과 같고, 1vw는 뷰포트 너비의 1/100과 같습니다.
예: 브라우저 높이는 950px, 너비는 1920px, 1vh = 950px/100 = 9.5px, 1vw = 1920px/100 =19.2px.
vh/vw와 %
코드:
<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>
<p class="p">P 标签的宽度为 50vw</p>효과:
설명:
1 vw는 페이지 너비의 1%에 해당합니다. 1000px이면 1vw
는 10px이고 vh는 동일합니다.
P 태그의 너비는 50vw이므로 페이지 너비의 50%이고 높이는 50vh이므로 페이지 높이의
50%입니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !
위 내용은 CSS vw의 단위는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!