1、流式布局（百分比布局） 案例：京东移动端
优点：简单方便，只需要固定高度，宽度自适应；
缺点：大屏幕手机实际显示的不协调。
2、响应式布局
优点：可以节约成本，不用再做专门的web app网站（外包公司、小公司、博客)；
缺点：工作量大、维护很难；国内大型企业在移动端很少用。
3、固定宽度 案例：荔枝FM 640px
优点：与设备做等比例的缩放；
缺点：在大屏幕手机下两边留白，操作按钮小。
4、目前主流做法rem 案例：淘宝移动端
rem：font size of root element 相对于根目录字体的大小；
优点：能等比例的适配所有的屏幕，rem是根据html的font-size大小来变化的，基于这个出发，我们可以在任何一个设备下根据设备的宽度来设置html字号，从而实现自适应布局。
两种方案：
（1）rem随设备宽度做自适应，scale值固定为1；
（2）rem随设备宽度做自适应，viewport进行缩放，scale值不固定。
5、未来趋势
vw/vh 相对于viewport理想的视窗（设备）的比例；（目前兼容性较差）
1vw=1%*设备宽度。
注：移动端基于标签meta
<meta name="viewport" content="width=device-width,initial-scale=1.0">
附：javascript获取设备宽度并设置根目录下字体大小的一种方法
！function(win){
var oHtml=win.document.documentElement; //获取html
var timer=null;
function changeRem(){
var width=oHtml.getBoundingClientRect().width; //获取设备的宽度，IE浏览器要做兼容处理
if(width>540){
width=540;
}
var rem=width/10;
oHtml.style.fontSize=rem+"px"; //设置根目录下字体大小
}
win.addEventListener("rasize",function(){
clearTimeout(timer);
timer=setTimeout(changeRem,300);
})
changeRem();
}(window);