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

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

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

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

    import ‘a(chǎn)mfe-flexible’

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

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

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

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

    頁面中可以看到自動轉(zhuǎn)為了rem。