CSS에서 vw는 창 너비의 백분율을 의미하는 상대 단위입니다. vw는 창 너비에 상대적입니다. 창은 클라이언트 브라우저의 표시 영역입니다. 100개 단위의 경우 1vw의 크기는 창 너비의 1%입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 단위는 크기 단위와 색상 단위를 포함한 측정 단위입니다. 우리는 서로 다른 보기에서 웹 페이지의 레이아웃을 혼동하는 것을 피하기 위해 마주보는 단위를 자주 사용합니다.
vw는 Viewport 너비의 약어입니다. 1vw는 항상 현재 뷰포트 너비의 100분의 1과 같습니다. vw는 창 단위이자 상대 단위입니다. 뷰포트는 너비를 기준으로 100개의 vw 단위로 나뉩니다.
vw의 장점은 너비를 직접 얻을 수 있다는 점입니다. 그러나 %를 사용하면 본문 너비를 설정하지 않으면 시각적 영역의 너비를 정확하게 얻을 수 없으므로 이것이 좋은 장점입니다.
여기서 뷰포트는 아래와 같이 브라우저의 가시 영역을 나타냅니다.
샘플 코드:
h1{font-size:8vw;}뷰포트의 너비가 200mm인 경우, 위의 코드는 16mm, 즉 (8x200)/100
예제는 다음과 같습니다:
<html>
<style>
.p1{font-size:5vw;}
.p2{font-size:5px;}
</style>
</head>
<body>
<p class="p1">相对于viewport宽度大小的文字</p>
<p class="p2">px宽度大小的文字</p>
</body>
</html>출력 결과:
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS에서 vw는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
