一、首先确认一点，

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  会相应将字体也设置为原来的两倍（三倍）。