Rem是什么

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么要使用Rem

这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力。接下来我来看看目前一些企业的web app是怎么做屏幕适配的

Rem的使用方法

1 . 网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小, 例如：

    html{    
        font-size:20px;
        // 根元素html的字体必须设置
    }
    .btn{
        width: 6rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.2rem;  
    }

    推算出一下公式：
    10px  = 1rem 在根元素（font-size = 10px的时候）；

    20px  = 1rem 在根元素（font-size = 20px的时候）；

    40px  = 1rem 在根元素（font-size = 40px的时候）；

2 . 通过媒体查询设置兼容

    @media only screen and (min-width: 401px){    
        html {font-size: 25px !important;}
    }
    @media only screen and (min-width: 428px){    
        html {font-size: 26.75px !important;}
    }
    @media only screen and (min-width: 481px){   
        html {font-size: 30px !important; 
    }}
    @media only screen and (min-width: 569px){    
        html {font-size: 35px !important; }
    }
    @media only screen and (min-width: 641px){    
        html { font-size: 40px !important; }
    }

3 . 通过Javascript动态的设置【推荐】

    a : 方法一
    (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);


    b : 方法二
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
    // 750是设计尺寸， 可替换成手机PSD设计尺寸大小

    
    b : 方法三 (阿里某大牛)
    (function (doc, win) {
  const docEl = doc.documentElement
  const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  const recalc = function () {
    const clientWidth = docEl.clientWidth
    if (!clientWidth) return
    const max = 24
    const min = 9.3125
    let size = 20 * (clientWidth / 320)

    size = Math.min(size, max)
    size = Math.max(size, min)
    docEl.style.fontSize = size + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
文章目录