目标：使用 vw 和 less 完成移动端的布局。
一、vw 适配方案
1、vw 和 vh 基本使用
vw 和 vh 是相对单位，相对视口尺寸计算结果。
- vw：viewport width（1vw = 1/100视口宽度 ）
- vh：lviewport height ( 1vh = 1/100视口高度 )
<head>
<title>vw 和 vh 基本使用</title>
<style>
* {
margin: 0;
padding: 0;
}
/* vw 和 vh 是相对视口宽高计算结果，可以直接实现移动端适配效果 */
/* .box {
width: 50vw;
height: 30vw;
background-color: pink;
} */
.box {
width: 20vh;
height: 50vh;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2、px 转换为 vw 和 vh
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh单位的尺寸 = px 单数数值 / ( 1/100 视口高度 )
以主流设计稿尺寸（375 * 667）为例子，则：
- 1vw = xxx px / 3.75
- 1vh = xxx px / 6.67
举一个简单的例子，帮助大家理解：
- index.html 代码
<head>
<title>px 转换为 vw 和 vh</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
- less 代码
.box1 {
width: (68 / 3.75vw);
height: (29 / 3.75vw);
background-color: pink;
}
.box2 {
width: (68 / 6.67vh);
height: (29 / 6.67vh);
background-color: green;
}
// px单位尺寸 / 1/100视口的宽度或高度
- css 代码
.box1 {
width: 18.13333333vw;
height: 7.73333333vw;
background-color: pink;
}
.box2 {
width: 10.19490255vh;
height: 4.34782609vh;
background-color: green;
}
3、vw 和 vh 混合使用的问题
vw 和 vh 不混合使用， 一般使用 vw 作为单位尺寸。
比如：375 * 667 的设计稿有一个 100 * 100 的正方形，如果混合使用 width: (100 / 3.75vw)，height: (100 / 6.67vh)，在 375 * 667 屏幕下是个正方形，如果换成其他像素的手机，就可能不再是正方形了。
所以我们在使用 vw 或 vh 布局时，只使用是一个单位，width: (100 / 3.75vw)，height: (100 / 3.75vw) 或 width: (100 / 6.67vh)，height: (100 / 6.67vh)，这样就能保证在所有屏幕上都是一个正方形。一般我们使用 vw 开发。
二、综合案例-酷我音乐
结合之前所学，使用 vw 完成如下移动端页面布局：
想要完整代码的，点击这里获取Day13综合案例完整代码。完全免费，仅供学习参考使用。
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
