一、什么是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; 
    }
}