关于css:px转vwvh

63次阅读

共计 655 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0