css实现自适应之单位vh

vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width））

• 在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
• 系统会将视口的高度分为100份，1vh就占用视口高度的百分之一（宽度同）
• 1vh等于视口高度的1%（1vw等于视口宽度的1%）。
• vw和vh与百分比不同的是，百分比永远都是以包含他最近的父元素作为参考，而vw、vh永远都是以视口作为参考。

实例

<div class="box">
	<el-input class="put" placeholder="请输入您的手机号"></el-input>
</div>

.box{
  width: 55vh;
  height: 55px;
  display:flex; /*flex布局*/
  align-items: center;  /*垂直居中*/
  margin: auto; /*水平居中*/
}
.box .put{
  width: 55vh;
  height: 5vh;
}

效果图