下面的代码是看了大漠 使用Flexible实现手淘H5页面的终端适配 做的一个demo。
1 <!DOCTYPE html> 2 <html lang="en" ng-app="sections"> 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>双十一demo(Flexible)</title> 10 <style type="text/css"> 11 /*reset*/ 12 *{ 13 margin:0; 14 padding:0; 15 } 16 html{ 17 box-sizing: border-box; 18 } 19 body{ 20 max-width:10.0rem; 21 margin:0 auto; 22 overflow:hidden; 23 } 24 ul,li{ 25 list-style:none; 26 } 27 /*font-size*/ 28 div { 29 font-size:12px; 30 } 31 [data-dpr="2"] div{ 32 font-size:24px; 33 } 34 [data-dpr="3"] div{ 35 font-size:36px; 36 } 37 .font14{ 38 font-size:14px; 39 } 40 [data-dpr="2"] .font14{ 41 font-size:28px; 42 } 43 [data-dpr="3"] .font14{ 44 font-size:42px; 45 } 46 47 .font16{ 48 font-size: 16px; 49 } 50 [data-dpr="2"] .font16{ 51 font-size: 32px; 52 } 53 [data-dpr="3"] .font16{ 54 font-size: 48px; 55 } 56 57 .font18{ 58 font-size: 18px; 59 } 60 [data-dpr="2"] .font18{ 61 font-size: 36px; 62 } 63 [data-dpr="3"] .font18{ 64 font-size: 54px; 65 } 66 67 .font20{ 68 font-size: 20px; 69 } 70 [data-dpr="2"] .font20{ 71 font-size: 40px; 72 } 73 [data-dpr="3"] .font20{ 74 font-size: 60px; 75 } 76 77 /*activity*/ 78 .act-wrap{ 79 position: absolute; 80 top: 0; 81 right: 0; 82 bottom: 0; 83 left: 0; 84 background-color: #f5294c; 85 overflow-y: auto; 86 padding-bottom: 0.133333rem; 87 } 88 .act-header{ 89 width:10.0rem; 90 height:6.533333rem; 91 } 92 .act-con li{ 93 position:relative; 94 margin:0 0.133333rem 1px 0.133333rem; 95 background-color:#fff; 96 } 97 .clearfix:after{ 98 content: ""; 99 clear:both; 100 display:table; 101 } 102 .figure{ 103 margin-top:0.16rem; 104 margin-bottom:0.16rem; 105 width:2.346667rem; 106 height:2.346667rem; 107 float:left; 108 background-color:#6d91cf; 109 } 110 .figcaption{ 111 margin-left:2.56rem; 112 padding-top:0.16rem; 113 } 114 .title{ 115 height:1.2rem; 116 overflow:hidden; 117 } 118 .title a{ 119 color:#000; 120 } 121 .price{ 122 padding-top:0.133333rem; 123 padding-bottom:0.133333rem; 124 } 125 .price span{ 126 display:inline-block; 127 padding:0.053333rem 0.08rem; 128 background-color:#f5294c; 129 color:#fff; 130 text-align:center; 131 border-radius:2px; 132 vertical-align:middle; 133 } 134 .price strong{ 135 color:#f5294c; 136 vertical-align:middle; 137 } 138 .price small{ 139 color:#f5294c; 140 vertical-align:middle; 141 } 142 .type{ 143 color:#fd5100; 144 } 145 .btn{ 146 position:absolute; 147 padding:0.06667rem 0.26667rem; 148 text-align:center; 149 background-color:#f5294c; 150 color:#fff; 151 right:0.2rem; 152 bottom:0.2rem; 153 border-radius:2px; 154 } 155 </style> 156 </head> 157 <body> 158 <div class="act-wrap" ng-controller="activityctrl"> 159 <div class="act-header"> 160 <img src="{{activity.sections[0].brannerimg}}" alt=""> 161 </div> 162 <ul class="act-con"> 163 <li class="item" ng-repeat="item in activity.sections[0].items"> 164 <div class="clearfix"> 165 <a class="figure" href="{{item.link}}"> 166 <img src="{{item.imgsrc}}"> 167 </a> 168 <div class="figcaption"> 169 <div class="title font16"><a href="">{{item.poductname}}</a></div> 170 <div class="price"> 171 <span class="font14">{{item.activitydate}}</span> 172 <strong class="font20">¥{{item.price}}</strong> 173 <small class="font14">{{item.preferential}}</small> 174 </div> 175 <div class="type font16">{{item.activitytype}}</div> 176 <a class="btn font16">{{item.activityname}}</a> 177 </div> 178 </div> 179 </li> 180 </ul> 181 </div> 182 <script type="text/javascript" src="js/Angular.js"></script> 183 <script type="text/javascript"> 184 (function(){ 185 var app = angular.module('sections',[]); 186 app.controller('activityctrl',['$scope',function($scope){ 187 $scope.activity = activity; 188 } 189 ]); 190 var activity = { 191 sections:[{ 192 "brannerimg":"##", 193 items:[{ 194 "link":"##", 195 "imgsrc":"", 196 "poductname":"Carter's1年式灰色长袖连体衣包脚爬服", 197 "activitydate":"双11价", 198 "price":"299", 199 "preferential":"满400减100", 200 "activitytype":"热卖5885件", 201 "shoplink":"##", 202 "activityname":"马上抢" 203 }, 204 { 205 "link":"##", 206 "imgsrc":"", 207 "poductname":"光泽裤！[不起球不退色不勾丝]", 208 "activitydate":"双11价", 209 "price":"8", 210 "preferential":"满50减5", 211 "activitytype":"热卖5885件", 212 "shoplink":"##", 213 "activityname":"马上抢" 214 }] 215 }] 216 }; 217 218 219 })(); 220 </script> 221 222 </body> 223 </html>