通过JS实现根据浏览器宽度变化实时缩放页面整体大小

随着现今不同尺寸的终端设备越来越多，对于响应式页面来讲，为不同尺寸的设备设置不同的预设样式变得越来越复杂。有没有更加简单的方式来处理这个问题呢？

通过js与css3的rem结合的方式，可以较好的解决这个问题，具体代码如下：

// 整体页面宽度    
(function(doc, win) {       
     const resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';    
     var recalCulate = function() {    
         var docEle = document.documentElement;    
         //浏览器可视窗口宽度    
         w = win.innerWidth;   
         if (w > 750) {    
             num = (w / 1920) * 100;    
         } else {    
             //num = (w > 750 ? 750 : w) / 750; // **此时的750就是你设计稿的尺寸    
             num = (w / 750) *100; // **此时的750就是你设计稿的尺寸    
         }    
         docEle.style.fontSize = (num).toFixed(1) + 'px';    
     };    
     recalCulate();    
     if (!doc.addEventListener) return;    
     win.addEventListener(resizeEvent, recalCulate, false);    
 })(document, window);