等比例適配所有屏幕---css3 rem用法

1，rem的定義

　　rem（font size of the root element）是指相對於根元素的字體大小的單位。rem是一個相對單位。和em非常相似。em（font size of the element）是指相對於父元素的字體大小的單位。兩者之間的區別是一個計算的規則是依賴根元素一個是依賴父元素計算。

2，為什么要使用rem 

　　rem可以實現強大的屏幕適配布局。屏幕適配有很多種做法，例如：流式布局、限死寬度、還有就是通過響應式來做。但是，這些方案都有各種各樣的弊端。使用流式布局在頁面布局的時候大都是通過百分比來定義寬度，高度大都是用px來定義。流式布局最致命的缺點就是在大屏幕下的顯示效果會變成頁面元素被拉的很長，但是高度還是和原來一樣，顯得非常不協調。固定寬度是把頁面設定一個固定的寬度，超出部分留白。但是固定寬度也有一個缺點就是在大屏幕下看起來頁面會顯得特別小。

3，rem的使用方法

　　rem是通過根元素進行適配的，網頁中的根元素指的是html，我們通過設置html的字體大小就可以控制rem的大小。

          html {
        font-size: 40px;
      }
      .btn {
        width: 6rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.2rem;
        display: inline-block;
        background: #06c;
        color: #fff;
        border-radius: .5rem;
        text-decoration: none;
        text-align: center;
      }    

　　width: 120px = 6rem * 20px（根元素設置），當我們把html的font-size設置為40px的時候，就會變為240px。改變html中的font-size就可以等比例的改變所有用了rem單位的元素。在任何分辨率下，頁面的排版都是按照等比例進行切換，並且布局沒有亂。

　　我們可以通過js去動態改變根元素的font-size去調整，也可以利用media query（媒體查詢）改變根元素的font-size實現適配

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; 
    }
}