上上節(jié)移動(dòng)端使用amfe-flexible和postcss-plugin-px2rem做適配講了利用amfe-flexible+postcss-pxtorem來完成移動(dòng)端適配。這個(gè)方案帶來兩種不足：

1. 兩個(gè)插件需要配套使用，而且rootValue設(shè)置的值不好理解；

2. rem是相對(duì)于html元素字體單位的一個(gè)相對(duì)單位，從本質(zhì)上來說，它屬于一個(gè)字體單位，用字體單位來布局，并不是太合適

   
   

另外官方也拋棄了這種方案：

除了這種方案，還有其它方案嗎？

有！就是今天的主角：postcss-px-to-viewport。作用就是將css中的px轉(zhuǎn)化成vw。

今天來介紹一下viewport方案。

• 安裝：

• 在postcss.config.js中配置

重啟后，我們可以看到控制臺(tái)已經(jīng)變?yōu)椋?/p>

其所有配置參數(shù)：

提示：

當(dāng)前版本v1.1.1長(zhǎng)期未更新，include在vue3項(xiàng)目中實(shí)測(cè)不生效。不設(shè)置或者將其設(shè)置成include: undefined

如果控制臺(tái)報(bào)以下錯(cuò)誤：

可以通過將 postcss-px-to-viewport 換成 postcss-px-to-viewport-8-plugin 解決，配置文件：?

解決vant和postcss-px-to-viewport的配合

一般我們的設(shè)計(jì)稿都是750，而vant的設(shè)計(jì)稿是375，這就出現(xiàn)一種沖突。以750執(zhí)行的話，則vant組件會(huì)變小

解決辦法：

在postcss.config.js里的配置做如下修改，在vant庫里，我們依然用375的設(shè)計(jì)稿的寬度，其它的文件我們依然用750設(shè)計(jì)稿的寬度。

注意：

這里使用path.join('node_modules', 'vant')是因?yàn)檫m應(yīng)不同的操作系統(tǒng)，在mac下結(jié)果為node_modules/vant，而在windows下結(jié)果為node_modules\vant