声明：学习和引用的原网址http://caibaojian.com/web-app-rem.html

一、什么是rem？

rem（font size of the root element）是一个相对于根元素<html>的字体单位。与px像素不同，它是一个相对单位，而rem是相对于根元素html，em则是相对于父元素。

二、为什么web app要使用rem？

1、实现强大的屏幕适配布局，能等比例适配所有屏幕：
2、没有屏幕字体缩放问题：
3、没有em多次使用计算麻烦的问题：

三、计算出不同分辨率下font-size的值的方法

1.媒体查询@media

关于媒体查询@media(css3):
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

适用场景：改变不多的业务。
优点：只需要在做web app先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置，就能实现适配。
缺点：不能所有设备全适配。

核心代码示例：

html {
    font-size : 20px;
}
@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; 
    }
}

2.js

有好几个比较热门的库可以帮助我们解决移动端自适应可伸缩布局的问题。

⑴.阿里团队开源的一个库： lib-flexible

来自官方无奈的声明

使用方法也简单：
1.引入官方库（在所有资源加载之前执行这个JS。执行这个JS后，会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。）

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

2.还需要编写js函数或者scss语法来配合动态的修改dpr，样式就可以用rem了

⑵.viewport

使用方法：
1.在<header></header>中引入

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.编写js函数来动态处理html的font-size，这个的代码大家可以去网上搜。

// 设置页面rem大小
    // 以设计图( 750*1334 )尺寸宽度作为参考标准
    ;
    (function (doc, win) {
        var max = 750,
            docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= max) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * clientWidth / max + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

我两个都尝试了，感觉flexible好像是真的没有viewport好用啊，可能是因为我不会计算dpr吧！

rem

rem