在这边带大家如何在vue移动端项目中配置rem,这边分两种配置方法,一个是你自己手动换算进行计算换算,一个是使用插件来帮你换算,手动自己换算的话适合于Vue的各个版本,使用插件的我这边主要讲的是 Vite,至于其它自行百度
一、自己手动换算
自己手动换算的需要点数学基础,九年义务教育漏网之鱼就不是很建议选这个了
来到App.vue文件夹根标签 html 设置字体为 100px 并且层级设为最高,id app 字体设置为0.14rem,这样就换算好了,我这边换算的是100px等于1rem
在项目中我们需要手动自己把 px 全部换成 rem ,
!!这里要重点说一声,项目使用中必须将px全部换成rem,不然rem是不会生效的
二、使用插件自行换算
1、安装插件依赖
npm install postcss-pxtorem --save-dev
yarn add postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev
yarn add amfe-flexible --save-dev
2、配置
1、在mian.js中 引入amfe-flexible
import 'amfe-flexible'
2、在vite.config.js中配置postcss-pxtorem
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 112.5, // 设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
})
]
},
}
})
3、测试rem
写一个css样式
接下来打开浏览器:
可看到1125的宽占满全屏宽度,并且不会出现滑块,此时box的宽度为10rem,这就代表我们rem配置成功了。
现在就可以根据设计稿的大小写样式啦,不用转换~~~ 设计稿的尺寸写的是多少直接C/V过来就好了,不需要转换更改