响应字体大小（移动端）

大前提：
1、initial-scale 为 1；
2、在项目css中(注意不要被公共的base、common之类的影响了，资源加载顺序也是蛮重要的)，先把html的fontSize设置为 100px（或者加上媒体查询代码）, 避免加载未完成时候样式错乱;

html{fontSize:100px}

需要全屏的话加上CSS

html{height:100%;position:relative;}
body{margin:0 auto;height:100%;}
复制代码
 

方法一

复制代码
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
复制代码
方法二(用的不错)

复制代码
new function (){
            var _self =  this ;
            _self.width = 640; // 设置默认最大宽度
            _self.fontSize = 100; // 默认字体大小
            _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
            _self.changePage =  function (){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
            }
            _self.changePage();
            window.addEventListener('resize', function (){_self.changePage();}, false );
        };

　　//设计稿是640PX 则宽度为640/100=6.4rem
 
复制代码
方法三（640/750是设计稿尺寸可以修改，使用时候除以100为REM尺寸）

复制代码
!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
 
        doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document))
复制代码
 

 方法四（媒体查询）

换算rem工具（https://offroadcode.com/prototypes/rem-calculator/）

复制代码
@charset "UTF-8";
/* 320px布局 */
html {
  font-size: 100px; }

body {
  font-size: 0.14rem; }

/* iphone 6 */
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    font-size: 117.1875px; } }

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  html {
    font-size: 129.375px; } }

p {
  border: 1px solid #eee;
  padding: 0.1rem; }

.f12 {
  font-size: 0.12rem; }

.f14 {
  font-size: 0.14rem; }

.f16 {
  font-size: 0.16rem; }

.f24 {
  font-size: 0.24rem; }

.f30 {
  font-size: 0.30rem; }

.f36 {
  font-size: 0.36rem; }
复制代码
 方法五

复制代码
/**
 * [以iPhone6的设计稿为例js动态设置文档 rem 值]
 * @param  {[type]} currClientWidth [当前客户端的宽度]
 * @param  {[type]} fontValue [计算后的 fontvalue值]
 * @return {[type]}     [description]
 */
<script>
    var currClientWidth, fontValue,originWidth;
    //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）
    originWidth=375;
    __resize();

    //注册 resize事件
    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        //这里是设置屏幕的最大和最小值时候给一个默认值
        if (currClientWidth > 640) currClientWidth = 640;
        if (currClientWidth < 320) currClientWidth = 320;
        //
        fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
　　　　//如设计稿是750PX 则宽度为750/20=37.5rem
    </script>