h5適配的解決方案
一、 流程
設計師以750pt×1334pt尺寸進行設計（當然高度隨內容變化），最后用該尺寸的設計稿進行標注、切圖，前端采用淘寶的開源方案flexible進行適配。
二、 flexible使用方法
Flexible的使用方法非常簡單，只需要引入flexible_css.js和flexible.js 下載地址
l 第一種方法將文件下載后放入項目中引用（省略寫法，大家都懂的）
l 第二種直接使用阿里CDN資源
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js" ></script>
l 第三種直接使用內聯的方式將js貼到<head></head>之間（強烈建議）
js執行完成后，會在<html>元素上增加一個data-dpr屬性，以及一個font-size樣式。Js會根據不容屏幕判斷dpr的值（1/2/3）,同時給html加上相對應的font-size（例如75px） 。其中dpr是設備的像素比，例如iphone4-6的dpr為2，iphone6p-7p的dpr為3；因為安卓的高清屏太雜亂，flexible未做安卓的高清適配，統一將安卓的dpr設置為1，flexible判斷到如果dpr為1且屏幕寬度>540，認定為該手機是安卓高清屏手機，則屏幕寬度恒定設為540px（據統計540px是安卓手機最大的css像素）。
到此，我們頁面上的元素都可以通過rem單位來設置，他們會根據<html>元素的font-size做相應計算，從而達到不同屏幕的適配。
- 下面就是如何將px轉換成rem：
前面說了，我們是按750px的設計稿進行開發，為了方便換算，flexible將屏幕寬度為750的<html>元素設置font-size為75px，我們將75px稱之為rem基準值，針對這份設計稿，我們可以知道 1rem=75px。
這樣一來，對于視覺稿上的尺寸換算,只需要將原始px值除以rem基準值，例如視覺稿中179px*150px換算成2.346667rem*2rem。
- 如何快速換算
在實際生產過程中，每次都要計算px轉換rem，肯定會覺得非常麻煩，降低生產效率，為了提高效率，建議大家使用Hbuild或sublime開發工具，這兩個工具都有自動轉換的插件。
以Hbuild為例，右擊項目->屬性->代碼助手設置->啟用項目特定的設置->啟動px轉rem提示
- 字號不使用rem
在不同的屏幕下，我們是不希望看到字號也隨屏幕縮放，我們希望在小屏上看清文本，在大屏上看到更多的文本，所以字號還是用px單位設置，以及現在絕大多數的字體是點陣字體，通常是16px和24px，所以不希望出現13px、15px這樣的奇葩尺寸。
根據flexible的適配方案，dpr=2時<meta name=”viewport”>initial-scale屬性為0.5，dpr=3時<meta name=”viewport”>initial-scale屬性為0.3333333333
所以的用[data-dpr]屬性來區分不同dpr下的文本字號大小
.detail-line-content{font-size: 12px;} [data-dpr="2"] .detail-line-content{font-size: 24px;} [data-dpr="3"] .detail-line-content{font-size: 36px;}
三、總結
flexible是淘寶開源的h5適配方案，手機淘寶從14年開始至今一直在使用，比較穩定，并且在開發過程中不要進行復雜的折算，直接使用設計稿中的尺寸，方便好用。該方法是主流的h5前端開發方案之一，這篇文檔是我結合大漠老師寫的文檔和我的一些開發經驗，整理了較為簡單的流程，如有錯誤之處，敬請指正。
四、參考資料
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
浙公網安備 33010602011771號