Copy the code and you will see the same effect as the screenshot below. We will adapt the full screen to all page sizes under normal h5, and you will still use rpx as the development unit here.
<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;
}
}
For other questions about uniapp or things you don’t understand about this method, you can leave a message, I will reply and help you solve it as soon as possible.