一、首先確認(rèn)一點(diǎn)，
Flexlible是一種讓頁面能適配眾多不同的手機(jī)終端設(shè)備的一種方案，而flex是頁面的一種布局方式。兩者沒有任何關(guān)聯(lián)。
二、Flexlble的思路
讓終端的根font-size都是終端寬度的十分之一。
設(shè)計(jì)師給的設(shè)計(jì)圖也都縮小十分之一。
在寫代碼的時(shí)候利用 ? rem ? 去計(jì)算相應(yīng)的寬、高、或者字體
（假設(shè)設(shè)計(jì)圖750px的寬，則其十分之一為75px。設(shè)備中的寬為X（不同手機(jī)不一樣，用X表示），
設(shè)計(jì)X/值= 設(shè)備X/值未知 ）
（大多數(shù)情況下字體是取具體是像素值，但不同的dpr其取值的方式不同，后面會(huì)有介紹）
這樣就能保證在不同的手機(jī)中，其寫的頁面都是相對(duì)每個(gè)手機(jī)的設(shè)備寬的十分之一進(jìn)行計(jì)算。其對(duì)應(yīng)的位置、大小也就做到都一致的呈現(xiàn)效果
三、安裝build插件
目的：讓不同型號(hào)的手機(jī)的根font-size都是其屏幕寬的十分之一
新建一個(gè)文件夾，直接將下載的 ? build ?解壓縮放入在html同級(jí)目錄下
在flexlible.html中將如下 ? script ? 復(fù)制
<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js></script>
四、安裝 cssrem-maste 插件
目的：讓計(jì)算機(jī)自己去計(jì)算設(shè)計(jì)圖的像素在代碼中的rem值
自己計(jì)算相應(yīng)的寬、高、或者字體 的rem很麻煩，可安裝一個(gè)插件解決
打開Submit
如下圖找到對(duì)應(yīng)位置
打開Browse Rackages...
將下載的 ?cssrem-master直接拖到這個(gè)文件夾就可以了（一種快捷的安裝方式）
再將 ? cssrem-master ?里的如下文件打開
75：設(shè)計(jì)圖的寬度的十分之一
6：計(jì)算的 ? rem ?保留到小數(shù)點(diǎn)后幾位
注意：
1、
關(guān)于iphon手機(jī)的 ? data-dpr為2 或者3 ?使其手機(jī)圖像顯示更清晰的問題：
它們把放入的圖片大小 ? 為（data-dpr=1） 放入圖片大小的兩倍（或三倍）。
再將圖片縮小兩倍（或三倍）。
所以，放入的圖片直接為二倍或三倍圖就好，系統(tǒng)會(huì)自動(dòng)將圖片縮小。
2、
有些時(shí)候，會(huì)想保證字體的大小是固定不變的。直接給其具體像素值就好。
為了配合iphone的 ?dpr ?會(huì)相應(yīng)將字體也設(shè)置為原來的兩倍（三倍）。
