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