rem的使用

1、rem简介

rem是css单位，1rem的大小是通过html下的font-size这个css属性告诉浏览器的，使用替换px所在的位置即可。假定你预设在设计稿的时候1rem = 10px，然后一个元素的宽度是20px，高度30px，那么css这么写就可以。

html {
    font-size: 10px;
}
.ele {
    width: 2rem;
    height: 3rem;
}

2、在任何分辨率下都适用

如何确认1rem等于多少px？简单来说：

1、你有一个设计稿A（假定640px），有一个预设的rem和px的比例B（假如是1rem = 10px）

2、获取用户浏览器的可视区域的宽度C（假如是320px），那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知

3、原因是你假定屏幕可以容纳多少个rem，这是一个固定比例（如这里就是64rem）

1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

3、通用计算公式

//屏幕适应
(function(win, doc) {
    if (!win.addEventListener) return;
    var html = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    // orientationchange事件在设备的纵横方向改变时触发。
    function setFont() {
        //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
        html.style.fontSize = 20 * (html.clientWidth / 640) + 'px';
    }
    doc.addEventListener('DOMContentLoaded', setFont, false);
    win.addEventListener(resizeEvt, setFont, false);
})(window, document);

4、使用css适配

html{
    font-size: calc(100vw / 7.5);
}　　

根据CSS3规范，视口单位主要包括以下4个：

• vw：1vw等于视口宽度的1%。
• vh：1vh等于视口高度的1%。
• vmin：选取vw和vh中最小的那个。
• vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。