可定义如下的@mixin
方法:
/* iPhone 底部横线适配 */
@mixin iphoneAdaptive($name, $n:0px) {
@if($name==p) {
/* 可以通过增加padding-bottom来适配 */
padding-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
/*兼容 IOS<11.2*/
padding-bottom: calc(#{$n} + env(safe-area-inset-bottom));
/*兼容 IOS>11.2*/
}
@else if($name==m) {
/* 可以通过margin-bottom来适配 */
margin-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
margin-bottom: calc(#{$n} + env(safe-area-inset-bottom));
}
@else if($name==h) {
/* 可以通过height来适配 */
height: calc(#{$n} + constant(safe-area-inset-bottom));
height: calc(#{$n} + env(safe-area-inset-bottom));
}
}
在页面中使用
/**先引入定义上述方法的scss文件**/
@import "../../assets/css/mixin.scss";
.container {
/* 使用@include方法 */
@include iphoneAdaptive(p, 100rpx);
overflow-y: auto;
height: 100vh;
}
整个mixin.scss文件代码如下:
/* flex 水平布局 */
@mixin rflex($justify: center, $align: center) {
display: flex;
flex-direction: row;
align-items: $align;
justify-content: $justify;
}
/* flex 垂直布局 */
@mixin cflex($justify: center, $align: center) {
display: flex;
flex-direction: column;
align-items: $align;
justify-content: $justify;
}
/* iPhone 底部横线适配 */
@mixin iphoneAdaptive($name, $n:0px) {
@if($name==p) {
/* 可以通过增加padding-bottom来适配 */
padding-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
/*兼容 IOS<11.2*/
padding-bottom: calc(#{$n} + env(safe-area-inset-bottom));
/*兼容 IOS>11.2*/
}
@else if($name==m) {
/* 可以通过margin-bottom来适配 */
margin-bottom: calc(#{$n} + constant(safe-area-inset-bottom));
margin-bottom: calc(#{$n} + env(safe-area-inset-bottom));
}
@else if($name==h) {
/* 可以通过height来适配 */
height: calc(#{$n} + constant(safe-area-inset-bottom));
height: calc(#{$n} + env(safe-area-inset-bottom));
}
}
/* 一行文字溢出隐藏 */
@mixin textEllipse() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文字溢出隐藏 */
@mixin textEllipses($lines: 2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}
// 1px细线
@mixin thinLine($color: $themeColor, $width: 100%) {
background-color: $color;
width: $width;
height: 1px;
transform: scaleY(0.5);
}