Vue3+Vite 项目配置rem自适应
Vue3+vite 项目配置rem自适应
·
Vue3+Vite 项目配置rem自适应
vue3移动端项目自适应配置
依赖安装
npm install postcss-pxtorem
npm install amfe-flexible
或者
yarn add postcss-pxtorem
yarn add amfe-flexible
安装完成后,在项目得目录中找到vite.config.js,加入如下设置:
注意:根据项目的情况来编写,这里只是一个示例,主要看的内容就是postCssPxToRem。
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
postcss: {
plugins: [
postCssPxToRem({
// 自适应,px>rem转换
rootValue: 16,
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
selectorBlackList: ['norem'], // 过滤掉norem-开头的class,不进行rem转换,这个内容可以不写
}),
],
},
},
})
设置完成后,就已经是可以自动转换rem了,但是还没有做到将rem和px联系在 一起。
需要在main.js中再引入amfe-flexible.
import 'amfe-flexible'
这样就可以实现了px转rem并且自适应设备了。
更多推荐
已为社区贡献1条内容
所有评论(0)