移动端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>