在html中定义css字体单位标签的大小
css格式化文件reset.css中加入：

@media screen  and (max-width: 750px){
    html{font-size:30px;}
}
@media screen and (min-width:640px) and (max-width:749px){
    html{font-size:25px; }
}
@media screen and (min-width:480px) and (max-width:639px){
    html{font-size:20px; }
}
@media screen and (min-width:320px) and (max-width:479px){
    html{font-size:15px; }
}

根据不同尺寸的屏幕，去定义html级的单位字体大小，在PSD转换制作页面的时候，基本的手机端PSD的尺寸为750*1335，对照下来的尺寸也就是1rem=30px，在制作时掌握好计算尺寸就基本能解决这些问题了。
手机端的高度可以固定，宽度能用百分比来表示，就不要用rem去固定，必要的固定宽度的，就用rem固定，像一些按钮，基本都是用百分比去表示宽度的，像一些固定宽度的图标就用rem去固定。
在小一点的尺寸下字体换算比例可能会有所失衡，就更改一下reset.css中的media中的font-size大小，依照需求去改。
网上还有段代码是在js里头定义的字体大小的

<script>
    (function(){
      var _w = document.documentElement.clientWidth;//屏幕可视区域宽高w3c下全兼容
      var _h = document.documentElement.clientHeight;
              var _fontsize = (_w / 640) * 20;
              var style = document.createElement('style');
              style.type = 'text/css';
              style.innerHTML = 'html{font-size:' + _fontsize + 'px}';
              document.getElementsByTagName('head').item(0).appendChild(style);
                  })();
</script>

这段代码我用了一个项目，之后就没有再用了，很多高度问题因为比例的换算，到最后整个页面变形。后期问题太多，果断换了media调整整个项目尺寸。