1.100%布局
宽度变，高度不变
2./rem布局（r=root根元素大小，也就是html字体的大小，用js获取视口的宽度来决定html字体的大小实现大小的均匀变化。用媒体查询像素会有空隙，视口变大或者缩小，变化不均匀）
宽高随着布局视口的大小变化

rem的适配方案

  !(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));