写手机html页面，同时兼顾一下电脑端的一些技巧

首先将body和html的宽设置最大为750px 并且居中。

body,html {width: 100%;height: 100%;max-width: 750px;margin: 0 auto;background-color: #fff;}

然后给页面加上声明移动端设置的meta头

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

然后加上字体调整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){
                    docEl.style.fontSize = '200px';
                  }else{
                    docEl.style.fontSize = (100 * (clientWidth / 750) )*2 + 'px';
                  }
                };
              if (!doc.addEventListener) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);

加上这个之后 div的宽高，字体的大小等。都可以使用rem单位来进行设置。根据这段js 1rem = 100px 0.01rem = 1px。 写的时候注意换算下就可以了。