复制代码您将看到和一下截图一样的效果。我们将适配全屏至正常h5下的所以页面大小,您再此处将依然使用rpx作为开发单位。
<template>
<view class='pageBox'>
<view class="wrap">
name
</view>
</view>
</template>
<script>
export default {
data() {
return{
title:'title'
}
},
methods:{
},
onload(){
}
}
</script>
<style lang="scss">
.pageBox{
width: 100%;
height: auto;
display: flex;
justify-content: center;
.wrap{
/* #ifdef H5 */ //仅仅在H5下生效 防止出现滚动条
min-height: calc(100vh - 44px);
/* #endif */
/* #ifdef MP-WEIXIN */ //仅仅在wx下生效
min-height: calc(100vh - 0px);
/* #endif */
width: 92%;
}
}
</style>
//在app.vue中 添加对最大宽度的限制
body{
display: flex;
justify-content: center;
>uni-app{
max-width: 1190px;
background: red;
}
}
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。