结合手淘REM布局方案

需要和手淘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);
  }
}