一个网站做无限关键词大型网站架构实战
使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果
目录
一、vw和vh基本使用
二、vw和vh布局流程
三、vh布局弊端
一、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 * 29width: (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;
}