前几天讲了一个通过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实现的那篇文章。
网友评论