本文主要是介绍移动Web——vw，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vw移动适配
效果：当手机屏幕的尺寸发生变化的时候，网页元素的宽高都要等比例变化
- 相对单位
- 相对视口的尺寸计算结果
- vw：viewport width
- 1vw = 1 / 100视口宽度
- vh：viewport height
- 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;}/* vw 和 vh 是相对视口宽高计算结果，可以直接实现移动端适配效果 *//* .box {width: 50vw;height: 30vw;background-color: pink;} */.box {width: 50vh;height: 30vh;background-color: green;}</style></head><body><div class="box"></div></body>
</html>
vw布局
1.确定设计稿对应的vw尺寸（1/100视口宽度）
- 查看设计稿宽度---> 确定参考设备宽度（视口宽度） ---> 确定vw尺寸（1/100 视口宽度）
2.vw单位的尺寸=px单位数值 / （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适配</title><link rel="stylesheet" href="./demo.css">
</head>
<body><div class="box"></div>
</body>
</html>demo.less
// .box {
// width: (68 / 3.75vw);
// height: (29 / 3.75vw);
// background-color: pink;
// }.box {width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: green;
}// px单位尺寸 / 1/100视口的宽度或高度vh单位问题
开发中，能不能vw和vh混用？
- 不能
- vh是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>vh</title><link rel="stylesheet" href="./demo.css" /></head><body><div class="box"></div></body>
</html>
demo.less
.box {// 68 * 29width: (68 / 3.75vw);height: (29 / 6.67vh);background-color: pink;
}这篇关于移动Web——vw的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
