使用Flexible實現手淘H5頁面的終端適配【轉】
阿新 • • 發佈：2018-12-23
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <script src="build/flexible_css.debug.js"></script> <script src="build/flexible.debug.js"></script> <link rel="apple-touch-icon" href="favicon.png"> <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon"> <title>再來一波</title> <style> .item-section{ min-height:100%; background-color:#ee0a3b; position:relative;font-size:12px } [data-dpr="2"] .item-section{ font-size:24px } [data-dpr="3"] .item-section{ font-size:36px } .item-section_header{ text-align:center } .item-section_header img{ width:10rem } .item-section ul{ padding:.133333rem } .flag{ display:table; width:100%; margin-bottom:1px; background-color:#fff } .flag .flag-item{ display:table-cell; padding:.16rem 0; vertical-align:top; background-color:#fff } .flag .flag-item.figcaption{ width:133.333333rem; padding-left:.2rem; padding-right:.2rem; position:relative } .flag .flag-item.figure{ width:2.4rem; height:2.4rem } .flag .flag-item img{ width:2.4rem; height:2.4rem; vertical-align:top } .flag .flag-title a{ color:#333; line-height:1.25; overflow:hidden; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; box-orient:vertical; display:-webkit-box; display:box } .flag .flag-price{ padding:.15rem 0 .2rem } .flag .flag-price span{ display:inline-block; background-color:#ee0a3b; vertical-align:middle; border-radius:.026667rem; padding:.026667rem .08rem .013333rem; color:#fff; font-weight:700; margin-right:.066667rem; font-size:11px } [data-dpr="2"] .flag .flag-price span{ font-size:22px } [data-dpr="3"] .flag .flag-price span{ font-size:33px } .flag .flag-price strong{ display:inline-block; vertical-align:middle; font-weight:700; color:#ee0a3b; font-size:16px; margin-right:.16rem } [data-dpr="2"] .flag .flag-price strong{ font-size:32px } [data-dpr="3"] .flag .flag-price strong{ font-size:48px } .flag .flag-price small{ display:inline-block; vertical-align:middle; font-weight:700; color:#ee0a3b;font-size:12px } [data-dpr="2"] .flag .flag-price small{ font-size:24px } [data-dpr="3"] .flag .flag-price small{ font-size:36px } .flag .flag-type{ color:#ff3600 } .flag .flag-btn{ position:absolute; width:2.133333rem; height:.64rem; line-height:.64rem; background-color:#ee0a3b; text-align:center; color:#fff; font-weight:700; font-size:14px; bottom:.133333rem; right:.2rem; border-radius:.026667rem } [data-dpr="2"] .flag .flag-btn{ font-size:28px } [data-dpr="3"] .flag .flag-btn{ font-size:42px } </style> </head> <body> <div id="app"> <div class="item-section"> <div class="item-section_header"> <h2><img :src='brannerImag' alt=""></h2> </div> <ul> <li data-repeat="items" class="flag" role="link" href="{{item.itemLink}}" v-for="item in items"> <a class="figure flag-item" href="{{item.itemLink}}"><img :src="item.imgSrc" alt=""></a> <div class="figcaption flag-item"> <div class="flag-title"> <a href="{{item.itemLink}}" title="">{{item.poductName}}</a> </div> <div class="flag-price"><span>雙11價</span><strong>¥{{item.price}}</strong><small>({{item.preferential}})</small></div> <div class="flag-type">{{item.activityType}}</div> <a class="flag-btn" href="{{shopLink}">{{item.activeName}}</a> </div> </li> </ul> </div> </div> <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ data : { title: '再來一波', brannerImag: 'http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg', items: [ { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" }, { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" }, { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" }, { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" }, { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" }, { "itemLink": "##", "imgSrc": "https://placeimg.com/350/350/people/grayscale", "poductName": "Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093", "price": "299.06", "preferential": "滿400減100", "activityType": "1小時內熱賣5885件", "shopLink": "##", "activeName": "馬上搶！" } ] }, method : {} }).$mount('#app') ; </script> </body> </html> 【原文連結】 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html