Copie el código y verá el mismo efecto que la captura de pantalla a continuación. Adaptaremos la pantalla completa a todos los tamaños de página en h5 normal, y todavía usarás rpx como unidad de desarrollo aquí.
<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;
}
}
Si tienes alguna pregunta sobre uniapp o no entiendes este método, puedes dejar un mensaje, te responderé lo antes posible y te ayudaré a resolverlo.