关于css:px转vwvh

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