px到vw，vh

时间：2023-03-30 17:21:58 CSS

vw和vh是相对于视口的宽和高的，所以都是相对单位，随着视口宽和高的变化而变化。1vw等于视口宽度的1%1vh等于视口宽度的1%例如宽度为1920px，高度为1080px，设计稿中有一个div，宽度为960px，高度为100px。如何将此按钮的宽度和高度从px转换为vw和vh。我们可以用下面的公式`width(vw)=100/1920*960;默认1920px=100vw1px=(100/1920)vw``高度(vh)=100/1080*100;默认1080px=100vh1px=(100/1080)vh`

left

right

cssstyle.left{向左飘浮;宽度：50vw；身高：9.259vh；/*宽度：960px；(100/1920)*960=50vw默认1920px=100vw1px=(100/1920)vwheight:100px;(100/1080)*100=9.259vh默认1080px=100vh1px=(100/1080)vh*/background-color:blue;文本对齐：居中；}.right{浮动：正确；宽度：50vw；身高：9.259vh；/*宽度：960px；高度：100px；*/背景颜色：绿色；文本对齐：居中；}