CSS에서 vw는 무엇입니까?
- WBOY원래의
- 2022-04-18 16:01:304894검색
CSS에서 vw는 창 너비의 백분율을 의미하는 상대 단위입니다. vw는 창 너비에 상대적입니다. 창은 클라이언트 브라우저의 표시 영역입니다. 100개 단위의 경우 1vw의 크기는 창 너비의 1%입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서 vw란 무엇인가요?
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.