摘抄优秀博主L_羽鹏
1,第一种方式
在app.vue中
来着优秀博主https://blog.csdn.net/L_yupeng/article/details/124455487
自己还是不理解根标签100px啥意思?
来到App.vue文件夹根标签 html 设置字体为 100px 并且层级设为最高,id app 字体设置为0.14rem,这样就换算好了,我这边换算的是100px等于1rem。
然后就可以直接在页面用了 100px=1rem
插件运算的不理解
1、安装插件依赖
npm install postcss-pxtorem --save-dev
npm install 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
可看到1125的宽占满全屏宽度,并且不会出现滑块,此时box的宽度为10rem,这就代表我们rem配置成功了。
现在就可以根据设计稿的大小写样式啦,不用转换~~~ 设计稿的尺寸写的是多少直接C/V过来就好了,不需要转换更改