一、首先确认一点，
Flexlible是一种让页面能适配众多不同的手机终端设备的一种方案，而flex是页面的一种布局方式。两者没有任何关联。
二、Flexlble的思路
让终端的根font-size都是终端宽度的十分之一。
设计师给的设计图也都缩小十分之一。
在写代码的时候利用 rem 去计算相应的宽、高、或者字体
（假设设计图750px的宽，则其十分之一为75px。设备中的宽为X（不同手机不一样，用X表示），
设计X/值= 设备X/值未知 ）
（大多数情况下字体是取具体是像素值，但不同的dpr其取值的方式不同，后面会有介绍）
这样就能保证在不同的手机中，其写的页面都是相对每个手机的设备宽的十分之一进行计算。其对应的位置、大小也就做到都一致的呈现效果
三、安装build插件
目的：让不同型号的手机的根font-size都是其屏幕宽的十分之一
新建一个文件夹，直接将下载的 build 解压缩放入在html同级目录下
在flexlible.html中将如下 script 复制
<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js></script>
四、安装 cssrem-maste 插件
目的：让计算机自己去计算设计图的像素在代码中的rem值
自己计算相应的宽、高、或者字体 的rem很麻烦，可安装一个插件解决
打开Submit
如下图找到对应位置
打开Browse Rackages...
将下载的 cssrem-master直接拖到这个文件夹就可以了（一种快捷的安装方式）
再将 cssrem-master 里的如下文件打开
75：设计图的宽度的十分之一
6：计算的 rem 保留到小数点后几位
注意：
1、
关于iphon手机的 data-dpr为2 或者3 使其手机图像显示更清晰的问题：
它们把放入的图片大小 为（data-dpr=1） 放入图片大小的两倍（或三倍）。
再将图片缩小两倍（或三倍）。
所以，放入的图片直接为二倍或三倍图就好，系统会自动将图片缩小。
2、
有些时候，会想保证字体的大小是固定不变的。直接给其具体像素值就好。
为了配合iphone的 dpr 会相应将字体也设置为原来的两倍（三倍）。
