首先定义一个meta属性

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

然后用js动态设置html的基准值，页面中所以有单位的地方全用rem。以设计稿为准，以1rem = 100px来布局。

var html=document.getElementsByTagName("html")[0];
var rootResize=function(){
    var winClient=document.documentElement.clientWidth;
    var fontSize=winClient<640?(winClient/6.4>50?winClient/6.4:50):100; 
    html.style.fontSize=fontSize+"px";
}
rootResize();
window.onresize=function(){
    rootResize();
}

这里以设计稿宽为640px为例设置。视图范围在320px-640px之间。所以基准值就是50px-100px之间。
这样子计算基准值目的是为了方便把设计稿的尺寸转换为rem。直接除以100就可以了。

相关文章：

移动前端自适应适配布局解决方案
移动端页面开发适配 rem布局原理