在移动端网页开发过程中，根据不用设备尺寸来调整前端显示效果。根本上就是改变根元素 (<html>) 的字体大小。
1 (function (doc, win) { 2 var docEL = doc.documentElement; 3 // 判断窗口有没有 orientationchange 这个方法，有就赋值给一个变量，没有就返回resize方法 4 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 5 // 这个值与编辑器设置的1rem值相对应 6 var domfontSize = 50; 7 var UA = navigator.userAgent; 8 var recalc = function () { 9 if (UA.toLowerCase().indexOf('iphone') !== -1 || UA.toLowerCase().indexOf('android') !== -1) { 10 doc.querySelector('[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'); 11 } 12 13 var _Width = Math.min(docEL.clientWidth, window.innerWidth); 14 if (!_Width) return; 15 // 注意这里除的是375，domfontSize 是 50；（对应750设计图的100px） 16 docEL.style.fontSize = domfontSize * (_Width / 375) + 'px'; 17 } 18 recalc() 19 if (!doc.addEventListener) return; 20 win.addEventListener(resizeEvt, recalc, false); 21 // doc.addEventListener('DOMContentLoaded', recalc, false); // 绑定浏览器缩放与加载时间 22 23 })(document, window)
结合IDE的 cssrem 设置值，页面编辑中就可以直接写px单位自动转换为rem样式了。