移动端使用amfe-flexible和postcss-plugin-px2rem做适配

在移动端做适配有几种方法，今天来聊聊amfe-flexible和postcss-plugin-px2rem。

amfe-flexible：动态改变根字体的大小（会在html上自动添加上font-size）;

postcss-plugin-px2rem: 编译时，根据字根的大小，将px转换成rem。

• 安装

1. 安装amfe-flexible

2. 在main.js中引入

3. 修改public/index.html

安装好后，重新启动，就可以看到html上设置了font-size样式，切换不同型号的手机，可以看到font-size会随之变化。

1. 安装postcss-plugin-px2rem

2. 在vue.config.js添加如下码

配置好后，貌似我们成功喽。来试一下是否可以。在app.vue页面里给#app配置一下宽度，并给个黑色背景。

启动服务看下效果：控制台确实变成了7.5rem，html上的字根大小也确实是动态的。但似乎哪里不对啊！为什么任何型号的手机上都没有全屏铺满黑色？

揭密：

是因为px2rem和amfe-flexible换算的基数不一样！

以UI图750px为例，在插件px2rem里配置的基数是100px，即将整屏分成了7.5份，其它型号的手机如果分成7.5份的话，那么基数则是手机宽度/7.5，这个基数是html里的字根的大小。我们来看看amfe-flexible的基数是多少嘞？在node_modules找到amfe-flexible的库，发现这里设置的是将手机宽度分成了10，则每份的基数变少，所以铺不满。这里我们要做下修改，使amfe-flexible与px2rem匹配上：

打开amfe-flexible所在的目录：

将

替换成

修改后我们再重新启动一下看看效果吧~

在任何机型下都能铺满屏！完美！

接下来我们就可以使用px畅快淋漓地写代码啦！

提示：当脱离掉node_modules重新npm install项目依赖时还是需要重新修改一遍的，千万别忘了！