output.convertToRem

TIP

该配置由 Modern.js Builder 提供,更多信息可参考 output.convertToRem

  • 类型: boolean | object
  • 默认值: false

通过设置 output.convertToRem,Builder 可进行如下处理:

  • 将 CSS 中的 px 转成 rem
  • 在 HTML 模版中插入运行时代码,对根元素 fontSize 进行设置

Boolean 类型

当设置 output.convertToRemtrue,将开启 rem 处理能力。

export default {
  output: {
    convertToRem: true,
  },
};

此时,rem 配置默认如下:

{
  enableRuntime: true,
  rootFontSize: 50,
  screenWidth: 375,
  rootFontSize: 50,
  maxRootFontSize: 64,
  widthQueryKey: '',
  excludeEntries: [],
  supportLandscape: false,
  useRootFontSizeBeyondMax: false,
  pxtorem: {
    rootValue: 50,
    unitPrecision: 5,
    propList: ['*'],
  }
}

Object 类型

output.convertToRem 的值为 object 类型时,Builder 会根据当前配置进行 rem 处理。

选项:

名称类型默认值描述
enableRuntimebooleantrue开启 HTML 模版插入功能,动态计算根元素字体大小
rootFontSizenumber50根元素字体值
maxRootFontSizenumber64最大根元素字体值
widthQueryKeystring'' 根据 widthQueryKey 的值去 url query 中取 client width
screenWidthnumber375UI 设计图宽度
excludeEntriesstring[][]不进行调整的页面入口
supportLandscapebooleanfalse横屏时使用 height 计算 rem
useRootFontSizeBeyondMaxbooleanfalse超过 maxRootFontSize 时,是否使用 rootFontSize
pxtoremobjectrootValue。默认与 rootFontSize 相同 unitPrecision: 5。精确位数 propList: ['*']。支持转换的 CSS 属性postcss-pxtorem 插件属性

示例

export default {
  output: {
    convertToRem: {
      rootFontSize: 30,
      excludeEntries: ['404', 'page2'],
      pxtorem: {
        propList: ['font-size'],
      },
    },
  },
};
,