移动端适配之postcss-px-to-viewport
上上节移动端使用amfe-flexible和postcss-plugin-px2rem做适配讲了利用amfe-flexible+postcss-pxtorem来完成移动端适配。这个方案带来两种不足:
两个插件需要配套使用,而且rootValue设置的值不好理解;
rem是相对于html元素字体单位的一个相对单位,从本质上来说,它属于一个字体单位,用字体单位来布局,并不是太合适
另外官方也抛弃了这种方案:

除了这种方案,还有其它方案吗?
有!就是今天的主角:postcss-px-to-viewport。作用就是将css中的px转化成vw。
今天来介绍一下viewport方案。
安装:
在postcss.config.js中配置
重启后,我们可以看到控制台已经变为:

其所有配置参数:
提示:
当前版本v1.1.1长期未更新,include在vue3项目中实测不生效。不设置或者将其设置成include: undefined
如果控制台报以下错误:

可以通过将 postcss-px-to-viewport 换成 postcss-px-to-viewport-8-plugin 解决,配置文件:
解决vant和postcss-px-to-viewport的配合
一般我们的设计稿都是750,而vant的设计稿是375,这就出现一种冲突。以750执行的话,则vant组件会变小

解决办法:
在postcss.config.js里的配置做如下修改,在vant库里,我们依然用375的设计稿的宽度,其它的文件我们依然用750设计稿的宽度。

注意:
这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统,在mac下结果为node_modules/vant,而在windows下结果为node_modules\vant