大家都知道,再从css3中,vh和wh 是指电脑浏览器由此可见地区。
1vw 相当于窗口总长度的1%
1vh 相当于窗口总极高的1%
手机端应用vh 遇到的困难
因为,各种浏览器的计算高度不一样,例如 Safari 电脑浏览器会测算底端或上方的搜索框。
解决方法
组装 vh-check 软件
npm i vh-check -s
在 main.js 中引进
import vhCheck from "vh-check"; //手机端电脑浏览器100vh相对高度不一致 vhCheck();
在css样式中应用
<style lang="scss">
// 电脑浏览器 URL 栏表明的情形下原素均出现了移位
// JS 实行过一次复位 vhCheck() 后,就也可以用 CSS 自变量 --vh-offset 调整 100vh 了
$vh: calc(100vh - var(--vh-offset, 0px));
.form-content-box {
overflow: auto;
// 兼容前
height: 100vh;
// 兼容后
height: $vh;
}
.form-box {
// 兼容前
height: calc(100vh - 45px);
// 兼容后
height: calc(#{$vh} - 45px);
}
</style>
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你