頁面引入關鍵文件
flexible.js是淘寶前段開發的框架：
github地址：https://github.com/amfe/lib-flexible
在項目中我們一般使用的是2個js文件：
flexible_css.debug.js: 是處理css的。
flexible.debug.js: 處理頁面的。
- 執行這個JS后，會在
<html>元素上增加一個data-dpr屬性，以及一個font-size樣式。JS會根據不同的設備添加不同的data-dpr值，比如說2或者3，同時會給html加上對應的font-size的值，比如說75px。
注意：
強烈建議 JS 做內聯系處理，提升js加載的速度。
在頁面中的引用代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="yes" name="apple-mobile-web-app-capable"> 6 <meta content="yes" name="apple-touch-fullscreen"> 7 <meta content="telephone=no,email=no" name="format-detection"> 8 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 9 <title>再來一波</title></head> 10 <body> 11 <!--這里內容代碼--> 12 </body> 13 </html>
可以看到我們並沒引入 meta 帶 viewport 屬性的標簽：
1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
此時我們在瀏覽器中查看標簽解析結果：
html標簽上的設置，會根據移動端的不同， data-dpr 和 font-size 的值會發生改變。
注意：
這里在head中添加meta標簽，不能按之前的編輯頁面那樣加帶 viewport 屬性的 meta 的標簽。不然會讓js的計算不准。而且加上這個標簽后，meta放在flexible前面和后面效果是不一樣的。
美化工作
然后在接下來的操作中將 視覺稿中的px換成rem。
說明：
px轉rem我們可以借助一些插件，如less、sass或者編輯器插件。CSSREM
字號不使用rem
顯然，我們在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字號是相同的。也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機上看到更多文本，以及，現在絕大多數的字體文件都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現13px和15px這樣的奇葩尺寸。
如此一來，就決定了在制作H5的頁面中，rem並不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小。
具體代碼的實現：
1 div { width: 1rem; height: 0.4rem; font-size: 12px; // 默認寫上dpr為1的fontSize } [data-dpr="2"] div { font-size: 24px; } [data-dpr="3"] div { font-size: 36px; }
為了能更好的利於開發，在實際開發中，我們可以定制一個font-dpr()這樣的Sass混合宏：
1 @mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; } }
有了這樣的混合宏之后，在開發中可以直接這樣使用：
1 @include font-dpr(16px);
初試項目：
html代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="yes" name="apple-mobile-web-app-capable"> 6 <meta content="yes" name="apple-touch-fullscreen"> 7 <meta content="telephone=no,email=no" name="format-detection"> 8 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 9 <title>測試網頁</title></head> 10 <link rel="stylesheet" href="../css/views.css"> 11 <body> 12 <div class="head"> 13 <div class="clearfix"> 14 <a href="#" class="head-btn"><img src="../img/shop_btn.png" alt=""></a> 15 <div class="head-search"><input class="head-input" type="text" placeholder="按品牌、車型、價格"></div> 16 </div> 17 </div> 18 </body> 19 </html>
css代碼：
1 @font-size-base: 75; 2 img { 3 width: 100%; 4 height: 100%; 5 border: none; 6 vertical-align: middle; 7 } 8 9 .clearfix { 10 *zoom: 1; 11 } 12 .clearfix:before, 13 .clearfix:after { 14 display: table; 15 line-height: 0; 16 content: ""; 17 } 18 .clearfix:after { 19 clear: both; 20 } 21 22 23 24 .head { 25 padding-top: 20rem / @font-size-base; 26 padding-bottom: 20rem / @font-size-base; 27 padding-left: 40rem / @font-size-base; 28 29 .head-btn { 30 float: left; 31 display: block; 32 width: 140rem / @font-size-base; 33 height: 50rem / @font-size-base; 34 margin-right: 20rem / @font-size-base; 35 margin-top: 5rem / @font-size-base; 36 } 37 38 .head-input { 39 float: left; 40 width: 425rem / @font-size-base; 41 height: 60rem / @font-size-base; 42 border: 1px solid #ccc; 43 padding-left: 60rem / @font-size-base; 44 } 45 } 46 47 [data-dpr="1"] .head-input { 48 border-radius: 5px; 49 } 50 [data-dpr="2"] .head-input { 51 border-radius: 5px; 52 } 53 [data-dpr="3"] .head-input { 54 border-radius: 5px; 55 }
借鑒地址：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html