vue-cli3實現移動端自適應

1.安裝：

npm install lib-flexble --save

npm i --save postcss-plugin-px2rem

2.引入lib-flexible

在項目入口文件main.js 中引入lib-flexible

 

 

 3.去掉目標文件的index.html頭里的meta標簽。

public/index.html中去掉此行代碼

 

 4.vue.config.js(新建項目需要在項根目錄新建)中配置css.loaderOptions

 

 

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 75, //換算基數， 默認100
                        // unitPrecision: 5, //允許REM單位增長到的十進制數字。
                        //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
                        // propBlackList: [], //黑名單
                        exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
                        // selectorBlackList: [], //要忽略並保留為px的選擇器
                        // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
                        // replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
                        mediaQuery: false,  //（布爾值）允許在媒體查詢中轉換px。
                        minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
                    })
                ]
            }
        }
    },
}

此時rootValue為75是因為設計稿為750px，為375的二倍設計圖
若在375下：html,font-size會被設置為：37.5px
設計稿上div的width為750px，我們在css中就直接寫750px;
計算結果為：750/75*37.5=375px,剛好符合我們的預期
所以rootValue大小根據設計稿尺寸/10,若設計稿寬度為375px，rootValue: 37.5