移动端布局的思考和rem的设置

如下方法如有不正确的地方，欢迎指正

前提： 设置稿750px

目标：40px = 1rem

js设置方法：(小于等于750屏幕等比缩放)

          ;(function (doc, win, undefined) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
              if (clientWidth === undefined) return;
              docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';
            };
          if (doc.addEventListener === undefined) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false)
        })(document, window);

css设置方法（750，640，375，320等比缩放）：

        html{font-size:10px}
        /*媒体查询*/
        @media screen and (min-width:320px){
                    html{font-size:17.06px;}
                    }
        @media screen and (min-width:375px){
                    html{font-size:20px;}
                    }
        @media screen and (min-width:640px){
                    html{font-size:34.13px;}
                    }
        @media screen and (min-width:750px){
                    html{font-size:40px;}
                    }

思考：如果根据ui设计图，所有内容都随着屏幕变大而变大，字体会变得超级大，这是不可取的，事实上pc端常用字体是12px,14px,16px，移动端也基本相同，所以段落文字可以不做等比缩放处理，对于标题，还有图片需要做等比缩放。所有单纯用百分比和px布局也是可以的。