vant+postcss-px-to-viewport 记一次移动端网页适配之旅

Posted 2023-03-19

参考技术A 本次的需求其实很简单，即为公司制作一个可以在微信公众号上使用的网页，但是由于自己对移动端组件以及很多东西不熟悉，踩了很多坑。

一开始直接动手写乃至用element，完全达不到合格的美观程度，缩放element-ui元素很困难（在被科普了vant这样的移动端ui之后才知道这是一种愚蠢的行为），于是终于操起vant

vant很好用，但是把vant组件直接放在页面上遇到一个直接问题：太小了，同样尝试了一下缩放组件，但是这个操作工程量大且不一定美观，于是研究了一番发现：vant是按照375px的设计稿写的，其css大多单位是px，这能直接用就怪了，咨询了一波公司的前辈，得知他是把vant css中的px替换为rem来操作的，于是我打开css直接CTRL+F px转rem，当然两者有16倍关系我还是懂的，于是采取了根元素

我屏幕宽为1080px，将元素长度宽度除16再乘（1080/375）可让vant元素刚好填满我的屏幕，当然对于别的屏宽就暂时顾不了了，但是毕竟可用@media and screen来解决吗。
实践结果是，vantage元素合适地填满了我的chrome，填满了我的手机屏，却在微信处翻了车，一个复选框的边框厚得像门一样，此处图和原因再补。

发现这种方法没办法达成对微信的适配后，我转向了插件，起初使用的是postcss-pxtorem，其自动将css中的px转为rem，但这种方法还要搭配 lib-flexible 食用，而该库的作者这样告诉我们：有了viewport适配，我们已经退出历史舞台了。毕竟用一个库总比用两个方便，而且人家库作者都这么说了，便安装postcss-px-to-viewport，中间踏了点webpack的坑，但是postcss-px-to-viewport正常工作后效果拔群，一步完成适配，也不用去想@media and screen了。
关于px转rem与viewport，具体方案见 https://sunniejs.github.io/vue-h5-template/#/zh-cn/rem