手机H5自适应布局

手机H5自适应布局

注意：rem在使用的时候是为了保留设计稿原始的设计，是针对宽度的等比例缩放（因为不同的手机设备高度不同，宽高比不是固定的），也就是说设计稿的高度height是auto不设置的，当一个图片要占用整个屏幕的时候，width:100%,height:100%,这个时候高度相对于设计稿来说是被拉伸或者缩放的，这个时候只能用百分比来布局，等到只需要宽度width:100%，高度height:auto的时候才能用rem来布局

1、头部要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2、要用JQ或者JS给最外部的DIV或者body动态设置一个固定的大小，从而才能使里面的布局使用百分比是可行的（也就是需要用JQ或者JS获取屏幕尺寸(不是手机像素宽度)，然后动态生成第一步的viewport中的content里的width）
3、使用rem布局，具体网站https://isux.tencent.com/web-app-rem.html，
<script type="text/javascript">
            (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 / 320) + "px";
                };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener("DOMContentLoaded", recalc, false);
            })(document, window);
            </script>这里的20是设计图默认字体大小，320是设计图默认宽度