From fc097b6560b0ca7ae84f531d98a2c1003d999946 Mon Sep 17 00:00:00 2001
From: Zakary <zakarycode@gmail.com>
Date: Tue, 13 Sep 2022 19:36:37 +0800
Subject: [PATCH] fix(api): update pxtransform api fix #12475

---
 packages/taro-api/src/tools.js   |  5 ++++-
 packages/taro-h5/src/api/taro.ts | 10 +++++++---
 packages/taro-loader/src/h5.ts   |  3 ++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/taro-api/src/tools.js b/packages/taro-api/src/tools.js
index 516ad4c60d9c..39c476e89462 100644
--- a/packages/taro-api/src/tools.js
+++ b/packages/taro-api/src/tools.js
@@ -20,16 +20,19 @@ const defaultDesignRatio = {
   750: 1,
   828: 1.81 / 2
 }
+const defaultBaseFontSize = 20
 
 export function getInitPxTransform (taro) {
   return function (config) {
     const {
       designWidth = defaultDesignWidth,
-      deviceRatio = defaultDesignRatio
+      deviceRatio = defaultDesignRatio,
+      baseFontSize = defaultBaseFontSize
     } = config
     taro.config = taro.config || {}
     taro.config.designWidth = designWidth
     taro.config.deviceRatio = deviceRatio
+    taro.config.baseFontSize = baseFontSize
   }
 }
 
diff --git a/packages/taro-h5/src/api/taro.ts b/packages/taro-h5/src/api/taro.ts
index afc250f785b1..d1bd71d9b734 100644
--- a/packages/taro-h5/src/api/taro.ts
+++ b/packages/taro-h5/src/api/taro.ts
@@ -46,9 +46,13 @@ const initPxTransform = getInitPxTransform(taro)
 const requirePlugin = permanentlyNotSupport('requirePlugin')
 
 const pxTransform = function (size) {
-  // @ts-ignore
-  const { designWidth } = taro.config
-  return Math.ceil((((parseInt(size, 10) / 40) * 640) / designWidth) * 10000) / 10000 + 'rem'
+  const options = (taro as any).config
+  const baseFontSize = options.baseFontSize || 20
+  const designWidth = ((input = 0) => typeof options.designWidth === 'function'
+    ? options.designWidth(input)
+    : options.designWidth)
+  const rootValue = (input = 0) => baseFontSize / options.deviceRatio[designWidth(input)] * 2
+  return Math.ceil((parseInt(size, 10) / rootValue(size)) * 10000) / 10000 + 'rem'
 }
 
 const canIUseWebp = function () {
diff --git a/packages/taro-loader/src/h5.ts b/packages/taro-loader/src/h5.ts
index 8da901529995..6dda62bc565c 100644
--- a/packages/taro-loader/src/h5.ts
+++ b/packages/taro-loader/src/h5.ts
@@ -118,7 +118,8 @@ var inst = ${creator}(component, ${frameworkArgs})
 ${routerCreator}(inst, config, ${importFrameworkName})
 initPxTransform({
   designWidth: ${pxTransformConfig.designWidth},
-  deviceRatio: ${JSON.stringify(pxTransformConfig.deviceRatio)}
+  deviceRatio: ${JSON.stringify(pxTransformConfig.deviceRatio)},
+  baseFontSize: ${pxTransformConfig.baseFontSize || (pxTransformConfig.minRootSize >= 1 ? pxTransformConfig.minRootSize : 20)}
 })
 `
   return code