使用Flexible实现移动端页面的终端适配

前几天讲了一个通过sass和gulp来实现的一个移动端适配方法，也许有一部分同学并没有学过sass，也不会gulp之类的自动化工具，那么怎么办呢？难道就不做了么？不行的，工作还是要做的，提高也是要继续的。这里我给大家分享另外一个移动端页面适配的方法。

原理我就先不讲了，有时间我会专门讲一下这个方式的原理，这里主要讲一下怎么用，也许更多人不关注原理，只关注如何最快的解决问题吧。下面我会配上我实现的和效果图的对比，便于展示这个方式的可行性。

1、页面的head里面加上如下mate

2、在head里面加入flexible的相关文件，这里比较简易直接使用阿里cdn的文件地址，当然也可以下载下来自己添加。

以上两部完成之后，就会看到页面里的html和body标签上会自动的添加上font-size熟悉了，这个值会跟进设备的实际情况去获取。

这个时候就是第三步了，把设计图的px转换成rem。

转换方法如下：

目前Flexible会将视觉稿分成 100份 （主要为了以后能更好的兼容 vh 和 vw ），而每一份被称为一个单位 a 。同时 1rem 单位被认定为 10a 。如果视觉稿为750px，则：

1a = 7.5px;

1rem = 10a;

1rem = 75px;

比如设计图模块高度为30px，则转换成30/75=0.4rem。

其他地方尺寸转换同理；

如下是我简单的做了一点点，可以对比一下，边距，字号等是否和谐。

这个是设计图：

这个是我实现的：

由于时间的关系，我只是简单的示范一下，建议大家最好动手尝试一下。如果有什么不明白的欢迎私信交流。

用法其实就这么简单，唯一麻烦的就是所有的尺寸需要自己手动去算，如果用sass的那个方法，就不需要了。如果想更方便的实现，可以去看我用sass实现的那篇文章。