手机H5自适应布局
ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器
注意: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是设计图默认宽度