心系少时言 等一不归人

监听浏览器，针对不同分辨率计算font-size

//方法一
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            /*720为设计稿大小*/
            docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);  })(document, window);

//方法二
var bli = 100 / 750;
var FontSize = function(){
    if($(window).width() <= 750){
        $('html').css({
            'font-size': $(window).width() * bli
        });
    }else{
        $('html').css({
            'font-size': '100px'
        });
    }
};
FontSize();
$(window).resize(function(){
    FontSize();
});

//方法三
;(function (doc, win) {
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

  function calc() {
    var dEl = document.documentElement,
      clientWidth = dEl.clientWidth
      // minWidth = 1024,
      // maxWidth = 1920

    // if (clientWidth > maxWidth) {
    //   clientWidth = maxWidth
    // } else if (clientWidth < minWidth) {
    //   clientWidth = minWidth
    // }

    dEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
  }

  win.addEventListener(resizeEvt, calc);
  doc.addEventListener('DOMContentLoaded', calc);
})(document, window)

只需在js中添加如上一段代码，然后结果就是 100px = 1rem; 之后就可以使用rem实现自适应布局。

注意要在HTML页面顶部添加如下 meta 标签：

<meta charset="UTF-8">
<!-- 根据浏览器的屏幕大小自适应的展现合适的效果 -->
<meta name="applicable-device" content="pc,mobile" />
<!-- 移动端 浏览器中页面将以原始大小显示，不允许缩放 -->
<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" />
<!--自动选择更好的浏览器-->
<meta name="renderer" content="webkit">