我們?cè)诩冹o態(tài)網(wǎng)頁(yè)中使用js來(lái)適配各種移動(dòng)端的方法之前的文章已經(jīng)講過(guò)了，由于vue有更牛逼的插件，所以我們這里選擇使用插件來(lái)適配移動(dòng)端。

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

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

    然后，我們?cè)趍ain.js中引入amfe-flexible。

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

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

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

    配置完這些后，我們就能按照px的方法正常使用了，插件會(huì)自動(dòng)計(jì)算rem?？磦€(gè)例子。

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

    頁(yè)面中可以看到自動(dòng)轉(zhuǎn)為了rem。