记录一下关于移动端适配的解决方案

        之前在移动端的适配一直是个比较难搞的问题，之前都是写n+个css媒体查询，去做不同屏幕大小的适配，前段时间看到一篇帖子，对比了网易的跟阿里的适配方案，看了那片帖子，自己也跟在后面做了个小实验。

       帖子链接如下，https://mp.weixin.qq.com/s/f8T9jbsyMgddB3Giy3imsw；

       看完贴虽然不是很懂，但是看到了阿里开源了解决方案，测试了一下很强大，基本除了苹果的刘海屏幕长点，显示的多点外，基本上苹果的5、6、7、8显示的效果是一样的，安卓的非刘海屏幕手机显示的也是一样的效果；

         布局采用的是css3的弹性盒子布局flex；元素的宽高均采用的是阿里开源的方案中的rem做单位，比如一个容器的宽度是100%，就是10rem，以我的理解因该是把屏幕分竖着分10份，每份就是一个rem，所以iphone5/5s的1rem=32px，因此在布局的时候，我们只需要根据设计稿的标注值，转换成rem即可，比如设计稿是iphone6/6s的，字体的大小为18px，因为是iphone6/6s的宽度为360px，=》得到1rem=36px，所以字体为18px对应的就是0.5rem；

        看看开源方案的用法：  https://github.com/amfe/lib-flexible    

        开源工具可以通过npm 去安装，在创建项目的时候，cd 到项目文件夹，执行npm init，初始化一下package.json(必须要安转过nodejs，有npm 包管理的环境)；然后执行npm i -S amfe-flexible，安装成功后在html中写入：

        

代码

ip5/5s

ip6/7/8

ip6/7/8plus

ipX

三星S5

        从这些图可以看出同一时期的手机是能做到适配的，后面出的全面屏幕，刘海屏略有差异，感觉应该是手机的屏幕宽度变化不大，但是长度因为去除了头跟下巴，所有明显比以前的手机屏幕长，所以才会出现多显示的内容（只有iphoneX的显示到66，其他的都是56）