手机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是设计图默认宽度