vue移动端项目使用第三方ui框架适配rem的问题

原文链接:https://juejin.im/post/5b9763cfe51d450e6c7490b8

近期使用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之后,在配置中修改转换比即可。如下图:

展开阅读全文

没有更多推荐了,返回首页