需要和手淘rem布局方案结合使用
@function rem($pixel) {
// based width 375px, base font-size is 75px
$size: ($pixel * 2) / 75;
@return #{$size}rem;
}
@mixin lineClamp($num) {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: $num;
-webkit-box-orient: vertical;
}
@function px($px, $dpr) {
$size: $px;
@if index($px, !important) {
$size: nth($px, 1);
}
$value: $size * $dpr;
@if index($px, !important) {
@return #{$value}px !important;
} @else {
@return #{$value}px;
}
}
@mixin fz($px) {
[data-dpr="1"] & {
font-size: px($px, 1);
}
[data-dpr="2"] & {
font-size: px($px, 2);
}
[data-dpr="3"] & {
font-size: px($px, 3);
}
}
