1、app.vue
<style lang="scss">
// 底部小黑条适配
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.safe_area_padding {
padding-bottom: constant(safe-area-inset-bottom) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
.safe_area_margin {
margin-bottom: constant(safe-area-inset-bottom) !important;
margin-bottom: env(safe-area-inset-bottom) !important;
}
}
</style>
2、使用
需要用到的地方加入相应类名即可,如:class=“safe_area_padding”