测试类H5全屏展示的集中方法的异同之处

首先：这个写在js中，没什么说的

// 这段代码只是用来控制rem跟随屏幕的大小变化而显示不同的字体大小或者元素的宽度是响应式的
(function(doc, win) {
        var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if(clientWidth>=750){      
          // 如果屏幕大于750px，字体不在增大了，但是页面还是会大于750px
            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);

其次：

• html的搞设下100% 或 100vh；
• body的宽最大750px，要响应式使用7.5rem，不要什么750px这不响应式了
• body元素居中使用margin-left + translateX
  或者----------------------------------------------------------------------------------
• 来一个div包裹：给这个div设置width：7.5rem；margin：0 auto；

html{
     height: 100vh;
     height: 100%;    
}
body{
     width: 7.5rem; 
     margin-left: 50%;
     transform: translateX(-50%);
     height: 100%;
}

注意：

• 页面page的高度设100% 或 100vh效果是一样的，页面中的每一块div的高度使用百分比计算
• 页面背景图750*1334，可以设置页面高度为13.34rem，页面中每div的高度使用rem计算
• 针对输入框这种，高度不应该响应式，因此高度单位应该是px单位