rem的用法

原博客3分钟读懂移动端rem使用方法

使用rem

rem适合于移动端适配和制作全屏效果，例如设计图的宽度与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化。

使用场景

1.假设设计图为640px
2.设定为64rem=100%则1rem = 10px（比例自定义，也可以设置为1rem = 20px）
3.编写静态页面，然后将css中的px值都按照自己设定的rem与px的比例转化为rem。

注意

1rem的大小是通过html下的font-size这个css属性告诉浏览器的
所以在设置rem比例是在html上设置。

html{
	font-size:10px;如果1rem=10px
}
.div{
	width:50rem;/*width:500px;*/
	height:50rem;/*height:500px;*/
}

计算公式

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

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

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

B/A = D/C 这个公式就是保证在设计图上自己预设的一行的rem数量和实际屏幕宽度上一行的rem数量相同。
类似于给自己的网页打上网格，想放大或缩小网页来使得平铺时，就放大缩小网页里的每一个小块

当屏幕大小变化时，就需要取得当前屏幕大小来根据公式计算出此刻font-size大小

var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;

            //这里是假设在600px宽度设计稿的情况下，1rem = 10px；
            //可以根据实际需要修改
            docEl.style.fontSize = 10 * (clientWidth / 600) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);