CSS中的rem

爲何會使用rem呢？主要仍是瀏覽器和設備的大小不一。

這樣就涉及到頁面佈局的不統一啦，先說說pc中的多欄佈局吧，多欄佈局有三種基本的實現方式：固定寬度、流動、彈性，下面咱們就分別說說這三種佈局吧。

固定寬度佈局的大小不會隨着用戶調整瀏覽器窗口大小而變化，通常是900到1100像素寬。其中960像素是常見的，由於這個寬度適合全部PC顯示器、並且可以被1六、十二、十、八、六、五、四、3整除，不只容易計算等寬分欄的數量，並且計算結果也能獲得沒有小數的像素值。

流動佈局的大小會隨着用戶瀏覽窗口大小而變化。這種佈局可以更好的適應不一樣的屏幕，但同時意味着放棄對某些方面的控制，好比隨着頁面寬度變化，文本行的長度和頁面元素之間的位置關係均可能變化，在欄寬度加大時會出現內容元素周圍添加空白來保持內容居中，當寬度變小，可能會出現重疊。

彈性佈局與流動佈局相似，在瀏覽器窗口變化的時候，佈局佈局變寬，並且全部內容元素的大小也會變化，讓人產生一種全部東西都協調的變大或者變小的感受。

而後說說移動端，在大的pc屏幕的最佳體驗和手機中的最佳體驗有天壤之別。在pc上，可使用多欄佈局效果很好，但多欄佈局到了手機上就會變窄。用一個欄來組織成惟一可行的方案，這樣，用戶使用簡單的掃屏的方式，實現更好的體驗。

那麼如何實現說的這種響應式設計呢？

小設備上一種佈局不能適應多種屏幕尺寸，咱們須要一種可以檢測屏幕大小的方式，而後響應地修改佈局。就是須要讓頁面可以本身響應屏幕的變化。這這裏你們都應該想到可以使用的方式 一種：就是媒體查詢的方式。另外一種：使用rem 或者em 採用設置html的font-size使元素大小變化，來適應佈局的適應。

先說說媒體查詢的方式吧，媒體查詢實現響應式的要素：

媒體查詢：是一種CSS語法，能夠根據瀏覽器的特性，通常是屏幕或瀏覽器寬度提供CSS規則。

流式佈局：一樣的使用em或百分比或者rem等相對單位設定頁面整體寬度，讓佈局可以隨屏幕大小而縮放。

彈性圖片：是使用相對單位確保圖片再大也不會超過容器。

媒體查詢是CSS代碼的容器，其中的CSS只在某些條件（好比，當前頁面要被打印或者要顯示在某種類型或尺寸的屏幕上）具有時纔會應用。媒體查詢能夠用兩種方式來寫 @media規則和<link>標籤的media屬性

@media print{nav{display:none;}}

這句申明爲：若是當前頁面要打印，就不顯示nav元素。

最大屏寬度

@media screen and (max-width:568px) {.clumn{width:96%;}}

這句表示：該屏幕寬度不超過568px，那麼css種的.clumn類的元素寬度爲96%。

上面這種寫法就是斷點，斷點在這裏指的是媒體查詢起做用的屏幕寬度，若是設備的寬度等於或者小於斷點的寬度，那麼css就會起做用。

 ok，說了這麼多如今該說重點啦，那就是px 、em、rem

在Web頁面初期製做中，咱們都是使用px來設置咱們字體，元素高寬，由於它比較穩定和精確。可是這種方式存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的web頁面時，改變了瀏覽器的字體大小，這時會致使咱們的Web頁面的佈局被打破。影響用戶體驗，所以，這時就使用em來定義web頁面的字體。

使用px爲單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面會存問題，這樣就使用em就能解決，只不過em是針對父級元素而言的，使用起來不是很方便。

CSS3新增了一個相對單位rem(root em，根em)，這個單位引發啦普遍關注。這個單位與em區別在於使用rem爲元素設定字體大小時、仍然是相對大小、但相對的知識HTML根元素的font-size。這個單位可謂相對大小和決定大小的優點於一身，經過它既能夠作到只修改根元素就成比例的調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前除了IE8及更早的版本之外，全部瀏覽器均支持rem。對於不支持它的瀏覽器，應對方法就是多寫一個絕對但聞的聲明。這樣就能夠忽略用rem設定的字體大小：p{font-size:14px;font-size:.7rem}

em 和rem是相對單位，能夠對px和em、rem轉換工具 http://pxtoem.com/