移动端应用rem定义相对长度单位
rem是根据根元素,也就是html的字体大小来计算被定义元素的大小,而根元素的字体大小取绝于屏幕宽度,相应的JS代码:
(function (doc, win) { var fs = document.body.clientWidth / 750 * 28; fs = fs > 24 ? 24 : fs; fs = fs < 12 ? 12 : fs; document.documentElement.style.fontSize = fs + "px"; var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
喜欢的话,请点赞,转发、收藏、评论,谢谢!