px转vw、vh

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;
  }