vue-cli3项目中使用flexible和rem适配移动端的一些踩坑

最近在做一个移动端的项目，需要做一些适配处理，其实以前一直都是浑水摸鱼式的，虽然看了很多关于移动端适配的方案，感觉都很厉害，但一直迟迟不曾实践。（ps:好像大部分中小公司对这方面都没啥要求啊）╯▽╰

在网上找了一番后，发现手淘的flexible+rem的方案居多，决定试试这个。

好了，废话不多说，下面开始正式的采坑之旅。

首先构建vue-cli项目，这个基本就是按照官方文档一步步操作就可以了。 这里以最新的vue-cli3.0为例：

1.安装vue-cli

npm install -g @vue/cli

2.创建项目

vue create your-project

此处注意，对于win7的小伙伴，当你在创建项目中，需要进行一些选项的选择，当发现键盘上下键没法进行选项操作时，一定要多瞅两眼官方文档的这段话：

3.安装相关插件

npm install amfe-flexible postcss-px2rem-exclude --save-dev

注意：这里的px转rem的插件我用的是postcss-px2rem-exclude，而非postcss-px2rem，主要是前者可以排除一些第三方ui文件，不进行rem转换，后者则不行。

坑一
这里有一点比较模糊的，就是关于amfe-flexible的版本问题，有些地方叫lib-flexible，其实都是一个东西，之前一直傻傻分不清楚。这个js其实做的工作只有一个就是通过js动态修改meta，给html设置相应的font-size等，当然如果不用它的话我们也可以根据需要手动修改。

坑二
这里要说的是在使用过程中比较容易混淆的一点：字体大小适配问题。因为字体用rem的话会有缩放问题，视觉上不太友好，所有还是用px处理,根据不同的dpr来处理。
引入postcss-px2rem-exclude后，我们可以在css中这样写：

.selector {
    font-size: 28px; /*px*/
}

编译后：

[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}

这里我们看到编译后每个选择器前都多了一个属性选择器data-dpr，分别适配不同dpr下的屏幕。（ps：dpr即devicePixelRatio设备的像素比，想了解更多的小伙伴可以自行百度下）

那么配合ame-flexible使用的时候，它会根据当前设备的dpr动态的给html加上属性data-pr值，这样就可以使之前编译后的css生效了，但是实际项目发现，flexible压根就没有给html添加data-dpr呀，是我配置错了，哪里编译错了，还是到底哪儿错了…一顿捯饬后发现，flexible的源码里压根就没有这段处理啊！！！￣□￣｜｜

然后去github仓库里一看，我去，竟然版本不一样，npm包默认安装的是2.0分支的版本，这个版本里压根就木有这段处理，而master的版本里才是网上广为流传的那个版本。细看一番，发现作者的一段话：

此时的我，感觉自己太out了…

不过已经入坑了，而且这个方案目前应该也不会那么快就淘汰吧，继续采坑吧！

一番折腾后，继续，发现master版本里会根据不同的dpr对initial-scale进行缩放，缩放值是1/dpr，对于上面说的css的3个data-dpr，可以发现是成倍数关系的，那么通过缩放后字体视觉上就是正常大小。但是这样折腾一番字体好像没必要啊。果断决定不用这种方案，还是继续用2.0分支的版本，该版本仅仅是给html动态设置font-size大小，对于字体大小适配问题处理如下：
手动添加meta标签：

a.对于大标题或者slogan类的，直接用rem；
b.对于段落类的，描述性的，用px；
c.px不转rem的话，可以这么写

font-size: 24px; /*no*/

4.js动态设置容器高度问题
有些页面需要计算容器的高度，从而实现滚动加载等效果，但是在rem这种方案下，行内样式px是不会转化的。这时候该怎么办呢？
项目里暂时性的解决方案是用css的calc()处理，但是兼容性不好处理，只能后续有好的方案再改进吧。