Home >Web Front-end >CSS Tutorial >How to use css new units vw and vh in responsive design
Taking into account future responsive design development, the browser height can also be adjusted based on percentage values if you need. But using percentage-based values is not always the best way to define relative to the size of the browser window. For example, font size does not change as your window changes. Now the new units introduced in CSS3 clearly solve this problem.
The "vw" and "vh" introduced by css3 are based on the width/height relative to the window size, "vw" = "view width", "vh" = "view height"; above we call the window unit allowed We define the size closer to the browser window. Refer to the demo case to compare the css styles of the following four containers:
.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>You can shrink the demo window to see the changes at different sizes. Currently, this CSS3 application supports all major browsers, and IE must be 10 or above.
The above is the detailed content of How to use css new units vw and vh in responsive design. For more information, please follow other related articles on the PHP Chinese website!