CSS3新单位vw、vh的使用教程
什么是vw、vh?
- vw: 视窗宽度的1/100，1vw等于视窗宽度的1%
- vh: 视窗高度的1/100，1vh等于视窗高度的1%
vw、vh的优点
采用vw、vh单位编写CSS可以使网页在不同设备、不同分辨率下自适应布局，避免出现元素宽高失真的情况。
如何使用vw、vh
vw、vh可以用在元素的宽度、高度、边距、内距等布局属性中。
width: 50vw; /* 宽度为视窗宽度的50% */
height: 30vh; /* 高度为视窗高度的30% */
padding: 5vw; /* 上下左右内边距都为视窗宽度的5% */
margin: 2vh; /* 上下外边距都为视窗高度的2% */
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例1</title>
<style>
body {
margin: 0;
padding: 0;
}
.header {
height: 20vh;
background-color: #f2f2f2;
}
.content {
height: 50vh;
background-color: #e6e6e6;
}
.footer {
height: 30vh;
background-color: #d9d9d9;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
该示例演示了如何使用vw、vh来实现div元素的高度自适应，当浏览器调整大小时，div元素的高度会按照视窗高度的比例进行调整，从而保证整个页面布局始终美观合理。
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例2</title>
<style>
body {
margin: 0;
padding: 0;
}
.box1 {
width: 50vw;
height: 30vw;
background-color: #f2f2f2;
margin-top: 10vh;
margin-bottom: 5vh;
margin-left: 10vw;
}
.box2 {
width: 20vw;
height: 20vw;
background-color: #e6e6e6;
margin-top: 20vh;
margin-bottom: 5vh;
margin-left: 60vw;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
该示例演示了如何使用vw、vh来实现div元素的宽度和边距自适应，当浏览器调整大小时，div元素的宽度、边距会按照视窗宽度和高度的比例进行调整，从而保证整个页面布局始终美观合理。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css3新单位vw、vh的使用教程 - Python技术站
微信扫一扫 
支付宝扫一扫 