TIP
该配置由 Modern.js Builder 提供,更多信息可参考 output.convertToRem。
boolean | object
false
通过设置 output.convertToRem
,Builder 可进行如下处理:
当设置 output.convertToRem
为 true
,将开启 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: ['*'],
}
}
当 output.convertToRem
的值为 object
类型时,Builder 会根据当前配置进行 rem 处理。
选项:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
enableRuntime | boolean | true | 开启 HTML 模版插入功能,动态计算根元素字体大小 |
rootFontSize | number | 50 | 根元素字体值 |
maxRootFontSize | number | 64 | 最大根元素字体值 |
widthQueryKey | string | '' | 根据 widthQueryKey 的值去 url query 中取 client width |
screenWidth | number | 375 | UI 设计图宽度 |
excludeEntries | string[] | [] | 不进行调整的页面入口 |
supportLandscape | boolean | false | 横屏时使用 height 计算 rem |
useRootFontSizeBeyondMax | boolean | false | 超过 maxRootFontSize 时,是否使用 rootFontSize |
pxtorem | object | rootValue。默认与 rootFontSize 相同 unitPrecision: 5。精确位数 propList: ['*']。支持转换的 CSS 属性 | postcss-pxtorem 插件属性 |
export default {
output: {
convertToRem: {
rootFontSize: 30,
excludeEntries: ['404', 'page2'],
pxtorem: {
propList: ['font-size'],
},
},
},
};