移动端适配
1、amfe-flexible:
amfe-flexible 主要用于动态设置根元素字体大小（rem），以根据屏幕尺寸进行自适应布局。 它会根据设备的屏幕宽度计算出根元素字体大小，并将其设置为页面的根元素的字体大小。 然后，开发者可以在 CSS 样式中使用 rem 单位来设置元素的尺寸和间距，从而实现自适应布局。
pnpm i amfe-flexible -D
2、postcss-pxtorem:
pnpm i postcss-pxtorem -D
配置：
postcss: {
plugins: {
tailwindcss: { },
autoprefixer: {
overrideBrowserslist: ['last 5 version', '>1%'],
},
'postcss-pxtorem': {
rootValue(input: { file: string }) {
const file = input.file
if (file?.includes('vant/')) {
return 100 / 2
}
return 100
},
propList: ['*'],
selectorBlackList: ['body', 'html', '.rem-ignore'],
},
},
},
3、也可以用替代postcss-pxtorem的插件postcss-pxtransform
pnpm i postcss-pxtransform -D
配置：
postcss: {
plugins: {
tailwindcss: { },
autoprefixer: {
overrideBrowserslist: ['last 5 version', '>1%'],
},
'postcss-pxtransform': {
baseFontSize: 50,
platform: 'h5',
selectorBlackList: ['body', 'html', '.rem-ignore'],
designWidth(input) {
const file = input?.file.replace(/\+/g, '/')
if (file?.includes('base/')) {
return 375
}
return 750
}
}
}
},
