demo
由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果，而且在手機移動終端下都是100%的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的尺寸，例如320、480、340、600這種特定的尺寸，那真是要累死前端開發的同學了。但是如果用rem來實現就可以不用考慮上訴的問題也可以達到自適應了。
這個效果對設計師的要求也是非常嚴格的，例如你需要指定乙個規範的寬度進行設計，我們的設計師是按照640的寬度去設計的，實際設計圖的寬度是640*2這樣做的目的是為了在移動端能高畫質顯示。小圖示是採用css3的圖示字型，不得不說這是個非常好的東西。
我們平常在使用長度單位都會使用px，但是在做上面的響應式的時候，需要用rem或者百分比的單位，大家可以看我的demo**。在上篇文章介紹了rem的字型設定計算方法：
html
body
p
通過設定html的font-size值來控制全域性的rem輸出，這段**其實是這個rem的精髓所在，我在我的頁面中設定了如下的**來控制不同裝置下的字型大小顯示使其達到自適應：
html
@media only screen and (min-width: 481px)
}@media only screen and (min-width: 561px)
}@media only screen and (min-width: 641px)
}
看上面的**，可能大家會覺得為什麼要這樣設定呢，其實這個是根據許多測試推算出來的，上面**如果要轉換城px會變成這樣：
html
@media only screen and (min-width: 481px)
}@media only screen and (min-width: 561px)
}@media only screen and (min-width: 641px)
}
上面展示的是怎麼通過計算獲取到不同解析度下的html font-site百分比的值。實際開發如果設計師是按照640的寬度去設計的，我們就按照最大的640去切圖，切圖的時候如果我們要設定margin怎麼banner，設計圖的值加入是10px的間距，我們通過640的比例去計算：
margin-top:
.5rem
;/*10 ÷ 20 = 0.5*/
padding-top:1rem /* 20 ÷ 20 =1 */
上面分別是設計圖上的間距10px和20px計算成rem的方法，大家可以以此類推，如果你的設計圖是640設計的就可以用上面的方法，反正每次以最大的值來計算就可以了。
實際開發中大家最常設定的估計就是height width值了，為了做到各個裝置下長度自己相應，許多開發人員會用百分比來做，這個是沒有問題，但是其實很多場景下用rem比百分比更加靈活，在我實際開發中，一般我只在大塊的div布局裡面用百分比，元素的設定一般都用rem來。例如：
height:100px;
/* 100 ÷ 20 = 5rem;*/
width:50px;
/* 50 ÷ 20 = 2.5rem;*/
其實就連border我們也可以用rem來做，但是貌似現在的安卓手機對border用rem單位有一小部分不支援，在我開發測試發現了，高版本的安卓瀏覽器支援，但是低版本的有許多都不支援，具體要不要使用就看你們自己的情況。
border:
.2rem solid #cccccc
;
用rem來做響應式開發
demo 由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果，而且在手機移動終端下都是100 的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的...
JS 用rem來做響應式開發
電腦版的 昨晚做完了，今天趕著做手機端的，提到手機端的 第乙個想到的就是要 適應不同手機螢幕的寬度，保證在不同手機上都能正常顯示給使用者，我之前做這類 都是無腦引進bootstrap的。但前乙個專案做完之後我發現bootstrap雖好，但裡面的各種樣式我利用的很少，最多用到它排版，當 最後上傳的時候...
用rem實現響應式頁面開發
rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴...