static/style/_safe-area.scss
page {
--safe-area-inset-top: 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: 0px;
--safe-area-inset-right: 0px;
}
@supports (top: constant(safe-area-inset-top)) {
page {
--safe-area-inset-top: constant(safe-area-inset-top);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left: constant(safe-area-inset-left);
--safe-area-inset-right: constant(safe-area-inset-right);
}
}
@supports (top: env(safe-area-inset-top)) {
page {
--safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left: env(safe-area-inset-left);
--safe-area-inset-right: env(safe-area-inset-right);
}
}
@mixin safe-top($paddingTop: 24rpx) {
padding-top: calc(max(#{$paddingTop}, var(--safe-area-inset-top)));
}
@mixin safe-bottom($paddingBottom: 24rpx) {
padding-bottom: calc(max(#{$paddingBottom}, var(--safe-area-inset-bottom)));
}
// 横屏
@mixin safe-left($paddingLeft: 24rpx) {
padding-left: calc(max(#{$paddingLeft}, var(--safe-area-inset-left)));
}
@mixin safe-right($paddingRight: 24rpx) {
padding-right: calc(max(#{$paddingRight}, var(--safe-area-inset-right)));
}
使用示例：
<style scoped lang="scss">
@import '@/static/style/safe-area';
.bar-wrapper {
background: red;
width: 100vw;
padding: 24rpx 20rpx;
@include safe-bottom;
}
</style>