使用vw布局方案,实现视口宽度不同,网页元素宽高等比缩放效果
目录
一、vw和vh基本使用
vw和vh为相对单位,相对视口尺寸计算结果
1vw = 1/100视口宽度
1vh = 1/100视口高度
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验vw和vh</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 50vw;
height: 30vw;
background-color: pink;
}
.box {
width: 50vh;
height: 30vh;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、vw和vh布局流程
-
根据设计稿确定1vw尺寸
-
px单位转换成vw单位尺寸
px / (1/100视口宽度)
效果展示:
代码:
html代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw适配</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
less代码段:
* {
margin: 0;
padding: 0;
}
// .box {
// // width: 68px;
// // 68 / 3.75
// width: (68 / 3.75vw);
// height: (29 / 3.75vw);
// background-color: pink;
// }
.box {
width: (68 / 6.67vh);
height: (29 / 6.67vh);
background-color: #ccc;
}
css代码段:
* {
margin: 0;
padding: 0;
}
.box {
width: 10.19490255vh;
height: 4.34782609vh;
background-color: #ccc;
}
三、vh布局弊端
vh是相对视口高度计算尺寸, 需要考虑全面屏,视口高度尺寸偏大
本质用vw和vh都可以,千万别一个盒子的宽高vw和vh混用
效果及代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vh</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
less:
* {
margin: 0;
padding: 0;
}
.box {
// 宽度用vw,高度用vh
// 68 * 29
width: (29 / 3.75vw);
height: (29 / 6.67vh);
background-color: pink;
}
css:
* {
margin: 0;
padding: 0;
}
.box {
width: 7.73333333vw;
height: 4.34782609vh;
background-color: pink;
}