错误在哪?
在uni-app中,明明所有代码都写对了,灰色蒙版中的白板还是不能居中。
先不急,我们从头开始讲。
1. 适配高度
灰色蒙版是每个全图消息的必备背景。
但为了适配各端的屏幕高度,我们以前通常要:
uni.SystemInfoSync.windowHeight
但我们有更好的选择,即vh, vw(视窗高度和宽度):
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3); // 浅灰色即可
2. 居中适配
还需要对需要的消息进行弹性居中。
display: flex;
align-items: center;
justify-content: center;
重点来了
但这样做还是不足以适配,需要:
top: 0;
和JS文件中添加
options: {
virtualHost: true;
}
这样白板的居中就能适配
- H5端
- 微信小程序
- 支付宝小程序
所有代码
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
options: {
virtualHost: true;
}
关注我,日更1个教程里没有的前端小知识点。
动动你发财的小手,给拎包哥点个赞吧!