欢迎光临散文网 会员登陆 & 注册

移动端适配之postcss-px-to-viewport

2023-08-31 19:56 作者:bengdour  | 我要投稿

上上节移动端使用amfe-flexible和postcss-plugin-px2rem做适配讲了利用amfe-flexible+postcss-pxtorem来完成移动端适配。这个方案带来两种不足:

  1. 两个插件需要配套使用,而且rootValue设置的值不好理解;

  2. 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


移动端适配之postcss-px-to-viewport的评论 (共 条)

分享到微博请遵守国家法律