页面引入关键文件
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