近期使用vue开发移动端项目,引入了mint-ui框架。由于mint-ui框架中css样式使用了px作为单位,无法使用rem适配不同设备的屏幕。
方案一,使用px2rem-loader将px转为rem
第一步:在终端中安装px2rem-loader
npm install px2rem-loader --save-dev
复制代码
第二步:然后在vue-cli项目找到build/utils文件,在里面加上以下代码:
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
复制代码
因为我们这边UI设计图是750的尺寸,所以我就把转换比设成了75,其实设成多少无所谓,反正插件会帮你计算的。
第三步:在当前文件中修改配置,如下图:
第四步:在入口文件中引入lib-flexible,进行适配。
前提是先安装后引入。安装命令:
npm install lib-flexible --save-dev
复制代码
之后就可以在项目中放心使用px了,插件会帮你自动转换的哦!!!
方案二,使用IDE自带的转换器。
我使用的是VS code,在扩展程序中安装px2rem之后,在配置中修改转换比即可。如下图: