设计工作问题小结-rem核心用法移动端自动适配

发布时间：2017-09-29责任编辑：朱明浏览：1316

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var oBodyHeight = docEl.offsetHeight;

var clientWidth = docEl.clientWidth;

if(!clientWidth) return;

if(clientWidth >= 750) clientWidth = 750;

if(clientWidth <= 320) clientWidth = 320;

docEl.style.fontSize = 625 * (clientWidth / 750) + '%';

document.getElementsByTagName('body')[0].style.height = oBodyHeight+'px';

};

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

说明：设计图为750px宽度；1rem=100px;

友善工作室供稿