在移動(dòng)端做適配有幾種方法，今天來(lái)聊聊amfe-flexible和postcss-plugin-px2rem。

amfe-flexible：動(dòng)態(tài)改變根字體的大?。〞?huì)在html上自動(dòng)添加上font-size）;

postcss-plugin-px2rem: 編譯時(shí)，根據(jù)字根的大小，將px轉(zhuǎn)換成rem。

• 安裝

1. 安裝amfe-flexible

2. 在main.js中引入

3. 修改public/index.html

安裝好后，重新啟動(dòng)，就可以看到html上設(shè)置了font-size樣式，切換不同型號(hào)的手機(jī)，可以看到font-size會(huì)隨之變化。

1. 安裝postcss-plugin-px2rem

2. 在vue.config.js添加如下碼

配置好后，貌似我們成功嘍。來(lái)試一下是否可以。在app.vue頁(yè)面里給#app配置一下寬度，并給個(gè)黑色背景。

啟動(dòng)服務(wù)看下效果：控制臺(tái)確實(shí)變成了7.5rem，html上的字根大小也確實(shí)是動(dòng)態(tài)的。但似乎哪里不對(duì)啊！為什么任何型號(hào)的手機(jī)上都沒有全屏鋪滿黑色？

揭密：

是因?yàn)閜x2rem和amfe-flexible換算的基數(shù)不一樣！

以UI圖750px為例，在插件px2rem里配置的基數(shù)是100px，即將整屏分成了7.5份，其它型號(hào)的手機(jī)如果分成7.5份的話，那么基數(shù)則是手機(jī)寬度/7.5，這個(gè)基數(shù)是html里的字根的大小。我們來(lái)看看amfe-flexible的基數(shù)是多少嘞？在node_modules找到amfe-flexible的庫(kù)，發(fā)現(xiàn)這里設(shè)置的是將手機(jī)寬度分成了10，則每份的基數(shù)變少，所以鋪不滿。這里我們要做下修改，使amfe-flexible與px2rem匹配上：

打開amfe-flexible所在的目錄：

將

替換成

修改后我們?cè)僦匦聠?dòng)一下看看效果吧~

在任何機(jī)型下都能鋪滿屏！完美！

接下來(lái)我們就可以使用px暢快淋漓地寫代碼啦！

提示：當(dāng)脫離掉node_modules重新npm install項(xiàng)目依賴時(shí)還是需要重新修改一遍的，千萬(wàn)別忘了！