移动端布局之postcss-px-to-viewport（兼容vant）

在这之前流行已久的移动端适配方案：rem

    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;     document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

上述是大家熟悉的代码

后来各种各样的换算系数复杂，出现了较早的换算插件：px-to-rem或者px2rem

人们希望有这样一种方案…

• 首先，无论换算方不方便，我都不想换算（就是这么懒🤭），我也不想去操心什么转换系数
• 其次，有些属性或者类选择器我不想进行转换
• css代码要足够简洁，我只希望看到一种单位，那就是px

第一种方案是lib-flexible+postcss-pxtorem

直到2020年的今天，我仍然可以说，lib-flexible+postcss-pxtorem是解决移动端布局的主流，但是我们可以好好想一想，它是否有什么不足？

从我个人来说，我认为它主要有以下两个不足：

1. 两个插件需要配套使用，而且rootValue设置的值不好理解
2. rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

翻阅其github地址，可以看到这样一段有意思的话：

第二种方案是viewport

文章主角

postcss-px-to-viewport就是这样一款优秀的插件，它解决了以上提到的痛点，也满足以上提到的理想要求。它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

webpack环境：postcss-px-to-viewport www.cnblogs.com/zhangnan35/…

vite环境：# cnjm-postcss-px-to-viewport