移動端Rem適配（基於vue-cli3 ，ui框架用的是vant-ui）

介紹
postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem
lib-flexible 用於設置 rem 基准值

1、安裝lib-flexible（用於設置 rem 基准值）

npm i -S amfe-flexible

2、在main.js文件中引入lib-flexible

import 'amfe-flexible'

3、安裝postcss-pxtorem（postcss-pxtorem是一款 postcss 插件，用於將單位轉化為 rem）

npm install postcss-pxtorem --save-dev

4、在public/index.html加入meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

5、項目配置postcss，有兩種方式（注意package.json 和 vue.config.js只選一種配置即可，不要同時配置）

（1）、在package.json中配置

"postcss": {
    "plugins": {
        "autoprefixer": {},
	"postcss-pxtorem": {
	     "rootValue": 37.5,
	     "propList": [ "*"]

} } }

（2）、在vue.config.js中配置

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
    css: {
        loaderOptions: {
        postcss: {
            plugins: [
            autoprefixer(),
            pxtorem({
                rootValue: 37.5,
                propList: ['*']
            })
            ]
        }
        }
    }
};

這樣就完成了適配，需要注意的是，css里面我們就只需要寫px，然后會自動轉換成rem在瀏覽器顯示，rootValue設置為37.5，之所以設為37.5，是為了引用像vant這樣的第三方UI框架，因為第三方框架沒有兼容rem，用的是px單位，將rootValue的值設置為設計圖寬度（這里為750px）75的一半，即可以1:1還原vant、mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。既然設置成了37.5 那么我們必須在寫樣式時，也將值改為設計圖（設計圖的寬為750px）的一半。

由於在寫樣式的時候將所有的大小都改成一半這樣寫起來不方便，所以通常在設置rootValue的時候更多人願意將其設置為75，這樣就可以按設計稿的大小來寫樣式了，設計稿設計出來是多少像素，寫樣式的時候就寫成多樣式。可以這樣的話對於vant、mint-ui等第三方框架的組件，他們渲染出來就會出現變小的情況，因為他們是基於375設計的。下面提供了兩種方法解決這種第三方框架的組件出現縮小的問題，下面均以vant-ui為例：

1、在配置中設置排除vant-ui相關的組件，讓該框架的組件不轉為rem，這樣的話框架的組件是px作為單位均不自適應了。（這種方式個人不怎么建議）

這里以vue.config.js中的配置為例（package.json的配置類似）

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
    css: {
        loaderOptions: {
        postcss: {
            plugins: [
            autoprefixer(),
            pxtorem({
                rootValue: 75,
                propList: ['*'],
                "selectorBlackList":["van-"]   //排除vant框架相關組件
            })
            ]
        }
        }
    }
};

 

2、動態設置rootValue的大小，即對於vant-ui框架的組件 將rootValue設置成37.5，對於我們自己的750寬度的設計稿的將rootValue設置成75。這樣就可以達到所有的均可自適應了

在根目錄下新建postcss.config.js文件，同時將vue.config.js 及 package.json文件中的postcss的配置刪除。然后在postcss.config.js文字中添加入下內容：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = ({ file }) => {
    let remUnit
    if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
        remUnit = 37.5
    } else {
        remUnit = 75
    }
    return {
        plugins: [
            autoprefixer(),
            pxtorem({
                rootValue: remUnit,
                propList: ['*'],
                selectorBlackList: ['van-circle__layer']
            })
        ]
    }
}　　

好了，到目前為止就算解決了 第三方框架的組件出現縮小  的問題。

最后啰嗦一句：由於viewport單位得到眾多瀏覽器的兼容，lib-flexible這個過渡方案已經可以放棄使用，不管是現在的版本還是以前的版本，都存有一定的問題。建議大家開始使用viewport來替代此方案