in consulting the mobile adaptation problem, the following solution is found:

@charset "utf-8";

/*
    pxrem
 */
@function px2rem($px, $base-font-size: 64px) {
  @if (unitless($px)) {
    //@warn "Assuming -sharp{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

@mixin font-dpr($font-size){
  font-size: $font-size / 2;

  [data-dpr="2"] & {
    font-size: $font-size;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 1.5;
  }
}

/**
 *  
 */
@mixin px-dpr($property, $size, $others:""){

  -sharp{$property}: $size / 2 -sharp{$others};

  [data-dpr="2"] & {
    -sharp{$property}: $size -sharp{$others};
  }

  [data-dpr="3"] & {
    -sharp{$property}: $size * 1.5 -sharp{$others};
  }
}

according to the introduction, I can convert px to rem directly through height: px2rem (10px) , but after testing, the style is very strange. I hope you can help me to see if there is something wrong with this method. If there is no problem, how do I configure and use it?