향후 반응형 디자인 개발을 고려하여 필요한 경우 백분율 값에 따라 브라우저 높이를 조정할 수도 있습니다. 그러나 백분율 기반 값을 사용하는 것이 브라우저 창의 크기를 기준으로 정의하는 가장 좋은 방법은 아닙니다. 예를 들어, 이제 CSS3에 도입된 새로운 단위는 이 문제를 명확하게 해결합니다. .
css3에서 도입된 "vw" 및 "vh"는 창 크기에 상대적인 너비/높이를 기반으로 합니다. 위의 "vw" = "보기 너비", "vh" = "보기 높이"입니다. 창 단위 허용을 호출합니다. 브라우저 창에 더 가까운 크기를 정의합니다. 다음 네 가지 컨테이너의 CSS 스타일을 비교하려면 데모 사례를 참조하세요.
.demo {
width: 100vw;
font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
}
.demo2 {
width: 80vw;
font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
}
.demo3 {
width: 50vw;
font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
}
.demo4 {
width: 10vw;
height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
}
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="demo">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
<div class="demo4">4</div>
</html>데모 창을 축소하여 다양한 크기의 변경 사항을 확인할 수 있습니다. 현재 이 CSS3 애플리케이션은 모든 주요 브라우저를 지원하며 IE는 10 이상이어야 합니다.
위 내용은 반응형 디자인에서 CSS 새 단위 vw 및 vh를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
