響應式佈局rem的使用

在現在移動端,響應式佈局的時代,用rem做爲單位已是很是普及的一門小技巧了..
rem的單位根據html的font-size來進行換算！

1.rem的兼容性：

以下圖所示IE9以上就支持了rem這個屬性,你說IE6 7 8怎麼辦,怎麼辦?讓IE去死唄,都H5了還兼容個蛋蛋.手機端就更不用說IE了



2.rem的介紹：

首先在不作任何設置的狀況下1rem=16px;由於瀏覽器默認html的font-size爲16px;那麼若是用16px去進行換算,咱們在書寫css時候將會變得異常吃力...因此咱們須要作的就是找一個換算相對簡單的值.

3.rem的換算：

目前來看,不少前端大手子都喜歡上手就給html的font-size:62.5%或者是625%,什麼意思?
font-size:62.5%就是16px(默認值)的百分之62.5
62.5%*16px的也就是10px...那麼如此一來1rem就爲10px,若是是625%,則1rem就爲100px.
好比說如今設html的font-size爲625%,咱們須要在正常1200px以上的顯示器中顯示
容器一:寬度爲325px,那麼咱們給這個容器的css爲width:3.25rem;
容器二:寬度爲130px,那麼咱們給這個容器的css爲width:1.3rem;
那這樣有什麼好處..固然有好處,好比如今咱們改變了設備大小
@media screen and (max-width:1200px){
code.....
}
若是說咱們單位給的是px...咱們須要給這2個容器分別重設px.但實際狀況一個頁面內至少有100個甚至1000個節點....那麼咱們如今有了rem這個屬性,
咱們只須要給html從新設置font-size那麼一切所有解決..剩下的只須要一些微調！
好比如今顯示器1200px時如今咱們想讓原來全部的容器寬度只有原來80%;咱們只須要讓html的font-size爲625%*80%也就是500%..依次類推,這樣即便是在小屏幕的手機端,咱們大能夠直接去改變font-size達到響應式的效果.

在老牛的博客中,正常狀況我給的三大板塊(熱推,文章,更新)分別爲2.2rem,7.8rem,1.94rem,也就是220px,780px以及194px如圖;



以後再1220px時候我從新定義了一次font-size





此時3模塊的寬度分別爲190px,673px,167px~~

在ipad(1024px下)我設置font-size爲464%,如圖



在iphone6下我把左右2邊直接去掉,中間模塊爲100%顯示,如圖

---

4.注意事項：
若是是製做pc與mb的響應式 換算請以625%來計算也就是1rem=100px,由於62.5%的換算會有偏差,並且偏差還不小！光作手機端的話問題不大！

原文連接:http://www.web-jackiee.com/a/xiangguanwebwenzhang/2016/0830/156.html