我們在純靜態網頁中使用js來適配各種移動端的方法之前的文章已經講過了，由于vue有更牛逼的插件，所以我們這里選擇使用插件來適配移動端。

    首先，我們安裝兩個插件postcss-pxtorem和lib-flexible，postcss-pxtorem會把px自動轉化為rem，而lib-flexible會自動調整html的font-size。

    npm install amfe-flexible -S
    npm install postcss-pxtorem -D

    然后，我們在main.js中引入amfe-flexible。

    import ‘amfe-flexible’

    比較特殊的是postcss-pxtorem不用引入，我們需要根目錄下創建一個新的文件，名為postcss.config.js，內容為：

    module.exports={
        　　plugins:{
        　　　　'postcss-pxtorem':{
        　　　　　　rootValue:75,//設計圖的1/10
        　　　　　　propList:['*'],//設定轉化為rem的css屬性
        　　　　　　selectorBlackList:['van','weui','mu'] // 忽略轉換正則匹配項
        　　　　}
        　　}
        }

    配置完這些后，我們就能按照px的方法正常使用了，插件會自動計算rem?？磦€例子。

    這邊創建一個寬高為750*300px 的背景為紅色字體為黃色的塊元素。

    頁面中可以看到自動轉為了rem。