css自适应 vh

2021-12-26 17:30:01 阅读：162 来源： 互联网

标签：1vh vh height 适应视口 css vw Viewport

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

效果图
在这里插入图片描述

标签：1vh,vh,height,适应,视口,css,vw,Viewport
来源： https://blog.csdn.net/weixin_52418790/article/details/122157387

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css自适应 vh