1、设计稿
建议让UI设计师将设计稿设计成750*1334的大小，这个是iPhone6的的分辨率的两倍大小。
2、开始编写前端页面，设置好html的font-size
写页面之前先设置好html的font-size,例：
html{
font-size:20px;//表示1rem=20px
}可以使用响应式设置某种设备的html的font-size，使得可以匹配当前设备的大小，例如：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}有一个可以匹配所有分辨率的做法，当设计稿是750*1334时，例：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';//表示在375*667的分辨率时，1rem=20px
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
3、添加头部meta
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
4、接下来就可以写样式了，当设计稿（此设计稿为750*1334）p元素的字体大小为28px,高度为80px，宽度为400px，样式如下：
p{
font-size:0.7rem;
height:2rem;
width:100rem;
}
5、设计稿图片处理方式，当ui给的是一张40*40的图片，需要设置为span元素的背景图时，例：
span{
width: 1rem;
height: 1rem;
display: inline-block;
background: url("../images/back.png") 0 0 no-repeat;
background-size:cover;/*需要设置背景图片的尺寸为覆盖的样式*/
}这样就可以开始移动端页面的编写了。
