vw和vh是绝对于视口的宽度和高度，因而他俩都是绝对单位，随着视口宽度和高度的扭转而扭转
1vw等于视口宽度的1%
1vh等于视口宽度的1%
举例宽度为1920px， 高度为1080px， 设计稿中有一个div， 宽为960px， 高位100px，
如何把这个按钮的宽高从px转换为vw和vh。
咱们能够应用以下公式
`宽度(vw) = 100 / 1920 * 960;
默认1920px = 100vw 1px =（100/1920）vw `
`高度(vh) = 100 / 1080 * 100;
默认1080px = 100vh 1px =（100/1080）vh`
<div> <div class="left">left</div> <div class="right">right</div></div>css款式
.left { float: left; width: 50vw; height: 9.259vh; /*width: 960px; (100/1920)*960 =50vw 默认1920px = 100vw 1px =（100/1920）vw height: 100px; (100/1080)*100 =9.259vh 默认1080px = 100vh 1px =（100/1080）vh */ background-color: blue; text-align: center; } .right { float: right; width: 50vw; height: 9.259vh; /*width: 960px; height: 100px;*/ background-color: green; text-align: center; }