原因
我們眼中看到的螢幕是由一個一個物理畫素組成的，而我們css使用的是邏輯畫素，也可以成為虛擬畫素。在我們呈現結果的終端，它們的畫素比可能都不一樣，這時候我們要採用裝置的畫素比（DPR），它體現了物理畫素和邏輯畫素之間的關係，計算公式如下所示：
DPR = 物理畫素/邏輯畫素
所以我們可以知道為啥我們設定的都是12px,14px,為啥顯示字型大小不一樣。
rem介紹
rem 是相對於根部字型的大小，我們一般預設為 16px。一般我們使用 rem 方案解決移動端適配問題。
解決方案1
我們可以在css通關-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對於不同的DPR來進行相應的設定
就比如1px畫素問題，我們可以通過這個來找到一個很好的解決方案

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border {
    &::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border {
    &::after {
      -webkit
 
-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}

解決方案2
1.js部分

function resize () {
        if (document.documentElement.clientWidth >= 600) {
          document.documentElement.style.fontSize = '30px'
          return
        }
        document.documentElement.style.fontSize = document
 
.documentElement.clientWidth / 20 + 'px'
      }
      resize()
      window.onresize = resize

2.單位轉換

/**單位轉換
@param {int} $px - 設計圖上的 px 大小
@returns {rem} - 轉換後的 rem 值
 */
@function r($px) {
  @return $px / 18.75 + rem;
}
或者
@function j($px, $base-font-size: 75px) {
  @if (unitless($px)) {
    @return j($px + 0px);
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}