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