由於最近在做公司移動項目的重構，因為要實現響應式的開發，所以大量使用到了rem的單位，覺得這個單位有點意思。但是現在貌似用他的人很少。上一篇文章我分享了淘寶寫的一篇rem的介紹，介紹的非常全面，但是他們似乎都把關註點放在了字體單位上了，其實rem不只是能應用到字體上面，還可以應用到長度和寬度上面，接下來看下我做的一個項目的首頁吧。

由於這個項目我設置了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的分辨率或者通過手機訪問看看效果。基本上在不同分辨率下都是差不多的展示效果，而且在手機移動終端下都是100%的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的尺寸，例如320、480、340、600這種特定的尺寸，那真是要累死前端開發的同學了。但是如果用rem來實現就可以不用考慮上訴的問題也可以達到自適應了。

這個效果對設計師的要求也是非常嚴格的，例如你需要指定一個規範的寬度進行設計，我們的設計師是按照640的寬度去設計的，實際設計圖的寬度是640*2這樣做的目的是為了在移動端能高清顯示。小圖標是采用CSS3的圖標字體，不得不說這是個非常好的東西。

設置對應的響應式的html rem比例

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

1. html{
2. font-size:62.5%; /* 10÷16=62.5% */
3. }
4. body{
5. font-size:12px;
6. font-size:1.2rem ; /* 12÷10=1.2 */
7. }
8. p{
9. font-size:14px;
10. font-size:1.4rem;
11. }

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

1. html {
2. font-size: 62.5%;
3. }
4. @media only screen and (min-width: 481px){
5. html {
6. font-size: 94%!important;
7. }
8. }
9. @media only screen and (min-width: 561px){
10. html {
11. font-size: 109%!important;
12. }
14. }
15. @media only screen and (min-width: 641px){
16. html {
17. font-size: 125%!important;
18. }
19. }

看上面的代碼，可能大家會覺得為什麽要這樣設置呢，其實這個是根據許多測試推算出來的，上面代碼如果要轉換城px會變成這樣：

1. html {
2. font-size: 62.5%; /* 10÷16=62.5% */
3. }
4. @media only screen and (min-width: 481px){
5. html {
6. font-size: 94%!important; /* 15.04÷16=94% */
7. }
8. }
9. @media only screen and (min-width: 561px){
10. html {
11. font-size: 109%!important; /* 17.44÷16=109% */
12. }
14. }
15. @media only screen and (min-width: 641px){
16. html {
17. font-size: 125%!important; /* 20÷16=125% */
18. }
19. }

給margin padding 設置rem

上面展示的是怎麽通過計算獲取到不同分辨率下的html font-site百分比的值。實際開發如果設計師是按照640的寬度去設計的，我們就按照最大的640去切圖，切圖的時候如果我們要設置margin怎麽banner，設計圖的值加入是10px的間距，我們通過640的比例去計算：

1. margin-top:.5rem; /*10 ÷ 20 = 0.5*/
2. padding-top:1rem /* 20 ÷ 20 =1 */

上面分別是設計圖上的間距10px和20px計算成rem的方法，大家可以以此類推，如果你的設計圖是640設計的就可以用上面的方法，反正每次以最大的值來計算就可以了。

給height width 設置rem

實際開發中大家最常設置的估計就是height width值了，為了做到各個設備下長度自己相應，許多開發人員會用百分比來做，這個是沒有問題，但是其實很多場景下用rem比百分比更加靈活，在我實際開發中，一般我只在大塊的div布局裏面用百分比，元素的設置一般都用rem來。例如：

1. height:100px; /* 100 ÷ 20 = 5rem;*/
2. width:50px; /* 50 ÷ 20 = 2.5rem;*/

給border 設置rem

其實就連border我們也可以用rem來做，但是貌似現在的安卓手機對border用rem單位有一小部分不支持，在我開發測試發現了，高版本的安卓瀏覽器支持，但是低版本的有許多都不支持，具體要不要使用就看你們自己的情況。

1. border:.2rem solid #cccccc;

總結

rem的使用其實我可能是只是總結了大家比較常用的一些屬性，其實他的範圍肯定不止是這麽多，實際的項目開發中我相信大家在使用他的過程會發現許多驚喜的，非常希望大家留言討論這一章的內容。有什麽問題我會第一時間反饋。

原文地址：

http://www.520ued.com/article/53e98eafbb16a74c41b5de77

用rem來做響應式開發(轉)