阅读视图

发现新文章,点击刷新页面。

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文档正常使用就好了

❌