vue开发后台管理,进行不同设备适配

今日开发一个后台管理系统,验收阶段,用户要求使用pad来进行浏览操作
直接用rem适配
百度了一些方法,都不太适用
后来杂七杂八都试了一下,总算可以了,记录一下

一.需要安装1.postcss npm install postcss --save
2.postcss-pxtorem npm install postcss-pxtorem --save //将css中的px转成rem
3.lib-flexible npm install lib-flexible --save //会动态设置html的根fontsize大小
*如果报错postcss-pxtorem,尝试安装5.1.1版本

二.安装后在postcss.config.js文件中配置

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 200,//设计稿的大小,
            propList: ['*']
        },
        autoprefixer: {}
    }
}

三.然后入口文件main.js中直接引入

import 'lib-flexible'

四.vue.config.js中添加配置 (修改这里后需要重启项目)

    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 192,  //需要同步postcss.config.js中的设置
                        propList: ['*']
                    })
                ]
            },
        }
    }

五.这里还有一点主意,是在一个博主那里看到的,需要修改lib-flexible的源码

在node_modules/lib-flexible/flexible.js中,找到

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr; //  width = 540 * dpr  这里的540改为width,根据自己的屏幕宽度来自动设置,而不是lib-flexible中固定的540
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

完毕,重启项目
注意,样式的宽高如果是行内样式,不会生效