移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案)，蛮好的，转自:
http://www.jianshu.com/p/985d26b40199
.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> <style> * { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; } *, *:before, *:after { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0 none; font-size: inherit; color: inherit; margin: 0; padding: 0; vertical-align: baseline; /* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */ max-height: 100000px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } em, strong { font-style: normal; } ul, ol, li { list-style: none; } body { font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif; line-height: 1.5; color: #333; background-color: #f2f2f2; font-size: 0.24rem; } a { text-decoration: none; } .box { position: relative; max-width: 10rem; margin: 0 auto; } .navRoot { position: fixed; z-index: 50; bottom: 0; left:0; width: 100%; height: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0.01rem solid #ccc; background:#f2f2f2; } .navLink { font-size: 0.42rem; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; color: #666; } .navLink.active { color: #1abc9c } .navLinkIco { display: block; margin-bottom: 0.1rem; } .navLinkText { display: block; line-height: 1; font-size: 0.24rem; } .img-responsive { width: 100%; } </style> </head> <body> <!-- 阿里高清方案 --> <script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script> <!-- 字形图标 --> <script src="https://use.fontawesome.com/f47f4563cb.js"></script> <div class="box"> <img src="http://temp.im/640x260/444/fff" class="img-responsive"> <ul style="font-size:0.3rem; padding: 0.2rem"> <li style="font-size:0.4rem"><a href="http://www.jianshu.com/p/985d26b40199">rem布局（进阶版）的一些说明</a></li> <li>1，大家先把这个页面在不同设备模式下浏览下，感受下。</li> <li>2，一般来说我们的手机端效果图是640px或750px。对于上图这类需要等屏宽的图片，只需让其宽度设为 100% 即可。</li> <li>3， 比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：.myBtn { width: 0.55rem; height: 0.37rem; }</li> <li>4，该布局方案要求凡是涉及尺寸的，单位都是rem，比如，height width margin paddint top border-radius 等等。你只需要按照效果图上标注的尺寸布局即可。</li> <li>5,此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。绝不是每个地方都要用rem，rem只适用于固定尺寸！</li> <li>6,特殊注意：字号font-size，边框大小、圆角边框的大小，这些最好还是用px来写。</li> </ul> <div class="navRoot"> <a href="#" class="navLink active"> <i class="fa fa-home navLinkIco" aria-hidden="true"></i> <span class="navLinkText">首页</span> </a> <a href="#" class="navLink"> <i class="fa fa-home navLinkIco" aria-hidden="true"></i> <span class="navLinkText">好店</span> </a> <a href="#" class="navLink"> <i class="fa fa-home navLinkIco" aria-hidden="true"></i> <span class="navLinkText">简单</span> </a> <a href="#" class="navLink"> <i class="fa fa-home navLinkIco" aria-hidden="true"></i> <span class="navLinkText">复杂</span> </a> <a href="#" class="navLink"> <i class="fa fa-home navLinkIco" aria-hidden="true"></i> <span class="navLinkText">异步</span> </a> </div> </div> </body> </html>
