Vue使用rem做自適應布局

1. 安裝插件

• npm install lib-flexible --save
• npm install px2rem-loader --save-dev

     2.  配置插件

• 在入口文件 main.js 中引入 lib-flexible：

•  import 'lib-flexible'

     3.  在 build/utils.js 文件中配置 px2rem-loader

• 在 cssLoaders函數最后面添加如下代碼

                 // 增加代碼，px轉rem配置（需要將px2remloader添加進loaders數組中）

                    const px2remLoader={

                                loader: 'px2rem-loader',

                               options: {

                                        remUnit: 192,  //根據視覺稿，rem為px的十分之一，1920px  192 rem

                                       remPrecision: 8//換算的rem保留幾位小數點

                                      }

最后說明一下，px 寫法上會有些不同，可以參考 px2rem 官方介紹，下面簡單介紹一下。
1. 直接寫 px，編譯后會直接轉化成 rem；
2. 在 px 后面添加 /*no*/，不會轉化 px，會原樣輸出；
3. 在 px 后面添加 /*px*/，會根據 dpr 的不同，生成三套代碼。
———————————————