今日開發(fā)一個后臺管理系統(tǒng),驗收階段,用戶要求使用pad來進行瀏覽操作
直接用rem適配
百度了一些方法,都不太適用
后來雜七雜八都試了一下,總算可以了,記錄一下

一.需要安裝1.postcss npm install postcss --save
2.postcss-pxtorem npm install postcss-pxtorem --save //將css中的px轉(zhuǎn)成rem
3.lib-flexible npm install lib-flexible --save //會動態(tài)設(shè)置html的根fontsize大小
*如果報錯postcss-pxtorem,嘗試安裝5.1.1版本

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

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 200,//設(shè)計稿的大小,
            propList: ['*']
        },
        autoprefixer: {}
    }
}

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

import 'lib-flexible'

四.vue.config.js中添加配置 (修改這里后需要重啟項目)

    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 192,  //需要同步postcss.config.js中的設(shè)置
                        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,根據(jù)自己的屏幕寬度來自動設(shè)置,而不是lib-flexible中固定的540
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

完畢,重啟項目
注意,樣式的寬高如果是行內(nèi)樣式,不會生效