方法一：设置fontsize 按照iphone 5的适配  1em=10px    适配320

// “()()”表示自执行函数(function (doc, win) {  var docEl = doc.documentElement,    // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',      recalc = function () {        //clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框        var clientWidth = docEl.clientWidth;        if (!clientWidth) return;        docEl.style.fontSize = 10*(clientWidth / 320) + 'px';      };   recalc();  //判断是否支持监听事件 ，不支持则停止  if (!doc.addEventListener) return;  //注册翻转事件  win.addEventListener(resizeEvt, recalc, false); })(document, window);

方法二：按照iPhone6的尺寸设计    是375/25=15px

(function (docs, win) {  var docEls = docs.documentElement,  resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',  recalcs = function () {  //getBoundingClientRect()这个方法返回一个矩形对象  window.rem = docEls.getBoundingClientRect().width/25;  docEls.style.fontSize = window.rem + 'px';};  recalcs();  if (!docs.addEventListener) return;  win.addEventListener(resizeEvts, recalcs, false);})(document, window);

方式三：采用media

1 html { 2     font - size: 20 px; 3 } 4 @media only screen and(min - width: 401 px) { 5     html { 6         font - size: 25 px!important; 7     } 8 } 9 @media only screen and(min - width: 428 px) {10     html {11         font - size: 26.75 px!important;12     }13 }14 @media only screen and(min - width: 481 px) {15     html {16         font - size: 30 px!important;17     }18 }19 @media only screen and(min - width: 569 px) {20     html {21         font - size: 35 px!important;22     }23 }24 @media only screen and(min - width: 641 px) {25     html {26         font - size: 40 px!important;27     }28 }复制代码

推荐使用的 js方式设置