em和rem

em是一个相对值，是相对于父元素的值。

body{
    font-size:62.5%;/*10/16*100%=62.5%*/
}
h1{
    font-size:2.4em;/*2.4em*10=24px*/  
}
p{
    font-size:1.4em;/*1.4em*10=14px*/
}
li{
    font-size:1.4em;/*1.4*?=14px?*/
}

rem -- “font size of the root element”. rem是相对于根元素<html>.

html{font-size:62.5%;/*10/16*100%=62.5%*/}
body{font-size:1.4rem;/*1.4*10px=14px*/}
li{font-size:1.4rem;/*1.4*1.=14px*/}

假设页面设计稿给我的时候是按照640宽度的标准尺寸给我的(html:10px)，怎么去计算不同宽度下font-size的值？举个例子：380/640=0.6，380是640的0.6倍，所以384宽度的页面的font-size也等于它的0.6倍，这时3984的html的font-size就等于12px，在不同设备的宽度计算方式以此类推。

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