其實rem不只是能應用到字體上面，還可以應用到長度和寬度上面，接下來看下我做的一個項目的首頁吧。
Demo
    由于這個項目我設置了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的分辨率或者通過手機訪問看看效果。基本上在不同分辨率下都是差不多的展示效果，而且在手機移動終端下都是100%的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的尺寸，例如320、480、340、600這種特定的尺寸，那真是要累死前端開發的同學了。但是如果用rem來實現就可以不用考慮上訴的問題也可以達到自適應了。
    這個效果對設計師的要求也是非常嚴格的，例如你需要指定一個規范的寬度進行設計，我們的設計師是按照640的寬度去設計的，實際設計圖的寬度是640*2這樣做的目的是為了在移動端能高清顯示。小圖標是采用CSS3的圖標字體，不得不說這是個非常好的東西。

設置對應的響應式的html rem比例
    我們平常在使用長度單位都會使用px，但是在做上面的響應式的時候，需要用rem或者百分比的單位，大家可以看我的Demo代碼。在上篇文章介紹了rem的字體設置計算方法：

CSS Code復制內容到剪貼板

html{   
    font-size:62.5%; /* 10÷16=62.5% */  
}   
body{   
    font-size:12px;   
    font-size:1.2rem ; /* 12÷10=1.2 */  
}   
p{   
    font-size:14px;   
    font-size:1.4rem;   
}  

    通過設置html的font-size值來控制全局的rem輸出，這段代碼其實是這個rem的精髓所在，我在我的頁面中設置了如下的代碼來控制不同設備下的字體大小顯示使其達到自適應：

CSS Code復制內容到剪貼板

html {   
    font-size: 62.5%;   
}   
@media only screen and (min-width: 481px){   
    html {   
        font-size: 94%!important;   
    }   
}   
@media only screen and (min-width: 561px){   
    html {   
        font-size: 109%!important;   
    }   
}   
@media only screen and (min-width: 641px){