# vw/vh 怎么用
- 超级简单，元素单位直接使用新单位 vw/vh 即可
- 因为 vw/vh 是相对单位，所以不同视口（屏幕）下，宽度一起变化完成适配。
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 10vw;
height: 10vh;
background-color: pink;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
如何还原设计稿？
前提：设计稿按照 iphone6/7/8 来设计，有个盒子是 50像素*50像素，如何使用 vw 呢？
分析：
① 设计稿参照iphone678，所有视口宽度尺寸是375像素（像素切换到2x模式）
② 那么1vw是多少像素？
375px / 100 = 3.75px
③ 元素的目标是多少像素？
50px * 50px
④ 那么 50*50 是多少vw?
50 / 3.75 = 13.3333vw
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 13.3333vw;
height: 13.3333vw;
background-color: pink;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
小结:
- 开发中使用vw，需要UI大师做哪些改动？
把模式改为2x(2倍图)模式
- 开发中使用vw，如何还原设计稿？
确定设计稿视口宽度，比如375. 直接使用测量数值 / (视口宽度 / 100)，比如50 / (375 / 100)