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

Demo

    由於這個專案我設定了最大的寬度限制是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.     }
13. }
14. @media only screen and (min-width: 641px){
15.     html {
16.         font-size: 125%!important;
17.     }
18. }

    看上面的程式碼，可能大家會覺得為什麼要這樣設定呢，其實這個是根據許多測試推算出來的，上面程式碼如果要轉換城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.     }
13. }
14. @media only screen and (min-width: 641px){
15.     html {
16.         font-size: 125%!important; /* 20÷16=125% */
17.     }
18. }

給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的使用其實我可能是隻是總結了大家比較常用的一些屬性，其實他的範圍肯定不止是這麼多，實際的專案開發中我相信大家在使用他的過程會發現許多驚喜的，非常希望大家留言討論這一章的內容。有什麼問題我會第一時間反饋。