在VUE中使用REM布局【結合postcss-pxtorem和amfe-flexible實作移動端适配】

在VUE中使用REM布局

這裡是的實作思路是① 通過postcss-pxtorem 實作将px 轉成rem。② 使用 amfe-flexible 插件進行 HTML 根節點的初始化。配置完這個兩個插件，我們就可以優雅的使用設計稿的px來進行開發啦。具體步驟如下：

步驟：

1. 安裝 postcss-pxtorem

npm install postcss-pxtorem --save-dev
           

2. 安裝 amfe-flexible

npm install amfe-flexible --save
           

3. 在Vue 的main.js中引入amfe-flexible

import  'amfe-flexible';
           

4. 在.postcssrc.js 中配置，vue-cli3.0 的版本在postcss.config.js中配置。

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}
           

基本配置就完成了，是不是很簡單， rootValue 這個值可以自己配置，如果你設計稿的長度是750基數的可以将rootValue的值修改為75。