在移动端 h5传统项目中使用vantui 并rem兼容适配

最近要做个移动端h5项目，因为需要接入到第三平台，代码目录格式都有要求。所以那种vue+cli，uniapp都不能用了。用html+js传统的开发方式来弄。仿佛一下子回到当年jquery的时代。开发之前得准备对应的ui库，毕竟h5项目还涉及多端适配。采用rem的方案。

另一方面打算引入第三方ui库来做开发，提高效率。在网站上找了下，发现个VantUI。 看了下官网介绍，demo，大概满足我的需求。 引入本地后发现不能根据rem进行响应式调整，原因是vantui源码中都是单位都是px。要进行rem适配需要做特殊处理，

自己尝试了把源码css拉下来改源码，把px改为rem，结果发现没卵用，可能因为px涉及的地方太多了改的不全导致效果不好吧。这个手改工作量庞大还容易出问题。突然想到可不可以把工程编译后的vant css拿出来单独用呢？？？省力还不容易出错。在网上搜了也没查到有这么干的，那就自己试试吧。

第一步：安装vue cli脚手架   npm i -g @vue/cli

第二步：创建工程 vue create my-project（用命令创建项目时出现卡顿且上下方向键选择配置项不好使。所以直接使用命令 vue ui  视图话界面创建项目，很直观方便）

第三步：

        工程项目里面引入"vant": "2.12.54", "amfe-flexible": "^2.2.1","postcss-pxtorem": "^5.0.0",

        项目根目录创建postcss.config.js文件

第四步：

main.js文件添加如下代码

import 'vant/lib/index.css';

import 'amfe-flexible/index.js'

Vue.use(Vant);

至此，如果我的朋友是要用工程构建项目，那现在就可以快乐的使用vantui 的rem方式进行响应式开发了。

但是我还要继续。。。。

我得想办法拿到rem转化后的vantui的css。运行项目后尝试用审查元素，直接找style里面的css样式。发现浏览器页面style标签里面的css样式超长被截断了，复制出来也不全，根本没法用。

所以想到工程类的项目可以利用webpack将css抽取出来作为单独的文件。这样我就可以引用了。

于是在vue.config.js中配置如下图代码，然后进行编译。（这中间走了很多弯路，网上有说使用mini-css-extract-plugin的，然后各种复杂的配置，一顿折腾也是不行。后来才发现就配置如下代码就可以单独把css单独抽取出来）

npm  run build开始编译  在dist目录下找到生成的 css文件引入到自己的项目里即可。

下面内容 更新于 2024-3-13 11:14:42

接上一回做完rem相关适配后，开始开发页面。随着开发页面的增多，发现一个问题；就是rem单位计算太麻烦了！ 比如拿到一份750的设计稿，分为10份 。那么1rem = 75px。如果设计稿中某个字体大小为12px。那么转化为rem就是 12/75=0.16rem.  一个项目涉及到单位换算的地方很多，所以很麻烦，虽然现在vscode有那种px2rem自动转化插件，方便了不少，但是还是很啰嗦。比如看到rem想知道多少px的时候，是很难直观知道多少的。

所以，经过俺的前端领导指点找到了新的rem设计方式（说到这里，有个小插曲，就是我说分成10份的时候，领导说要分成100份。一开始没明白领导的意图，感觉没啥变化，表达自己的疑问，经过细致沟通才知道领导的实际意图是将1rem换算成100px。而不是我理解的从原来除以10到除以100。总结：有问题或者疑惑一定要问清楚，因为别人说的内容可能和实际意思有偏差，但是自己不能稀里糊涂只听明面的意思，有疑惑及时问。这样才能真正的解决问题。事半功倍）。实际操作很简单（记得以前印象当中也知道这招，好久不用都忘记了。）现在网上一搜一大片都是设计稿除以10的来操作的。

好了，现在开始说说怎么弄吧。

可以看到，屏幕宽度以前除以10，现在改为除以7.5。这样的话1rem就等于100px了。这样只要涉及单位换算的时候，看见px除以100就可以了。非常方便。大大简化了单位换算的时间。逆推也是很方便。除了改这个，之前说到的vantui样式库css单位也要改。 所以在上面提到的项目工程里面的postcss.config.js文件中做如下修改。

重新npm run build 将新生成的css代码拷贝到h5项目中。就大功告成了，以后就可以快乐的开发h5项目了。无需再被rem单位换算的问题困扰了。