目录：
1. 基础准备
2. vw 详解
一、基础准备
1. 观察你的html里面有没有meta完美视口设置，如果有，就不用再管，如果没有，就加上。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--手机开发必须设置手机端的完美视口，以适配css像素和物理像素的视觉差-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
2.问题分析
当我们设置了完美视口后，会出现问题：
- 不同的设备完美视口不同：
iphone6 - 375
iphone6plus -- 414
- 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的，比如在iphone6中 ，375是全屏，而到plus中375就会缺一块。
- 所以在移动开发时，不能再使用px来进行布局。
解决方法：使用vw
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置手机端的完美视口，以适配css像素和物理像素的视觉差-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
/* 开发的是手机移动页面，就不能用px,而是用vw
100vw = 一个视口的宽度（100%），在这里就是和手机屏幕宽度一样
*/
width: 100vw;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1">aa</div>
</body>
</html>
二、vw 详解
1.vw:表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度（width = 100%）
- 1vw = 1%视口宽度
2.vw这个单位永远相当于视口宽度进行计算
3.百分比，他参照物的会随着父子关系变化，而不断改变，而vw参照的是永远是视口，所以推荐用vw。
4.手机界面的设计图的宽度,一般是750 x 1125px
(都是iphone6 375的倍数， 750是2倍图， 1125 是3倍图， 随着手机的越来越高清，大部分设计图都提供3倍图)
练习：
假设现在设计图是：750px, 使用vw作为单位： 100vw （整个视口的宽度）, 现在在设计图中测到的一个图标大小为： 48px x 35px ,
现在怎么把这个像素，换算成实际手机屏幕的像素？
100vw = 750px(设计图的像素) 0.13333vw = 1px
6.4vw = 48(设计图的像素) (0.13333 * 48 = 6.4vw)
4.667vw = 35px
.box1{
/* 设置图标的宽高*/
width: 16.4vw;
height: 4.667vw;
background-color: #bfa;
}
