vue3+vite使用unocss和vant做移动端开发适配,使用lib-flexible适配RemToPx
lib-flexible设置根字号
npm i lib-flexible
//然后在mian.js中引入
uno.config.js设置
根目录创建uno.config.js文件,需要安装 npm i @unocss/preset-rem-to-px
import { defineConfig, presetWind3 } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
presets: [
presetWind3(), //预设样式
presetRemToPx() // 重点,把预设的rem转成px,这样postCssPxToRem就可以转了 例如预设样式 text-base的font-size:1rem;经过转换变成16px,在经过postCssPxToRem转换成rem
]
})
这个是vite的配置
import postCssPxToRem from 'postcss-pxtorem'
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5,
unitPrecision: 6,
minPixelValue: 1,
propList: ['*'],
mediaQuery: false,
})
]
}
}
)}
其他的按照vant文档正常使用就好了