響應式佈局中rem的用法

1.rem是什麼呢？

rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過rem計算的規則是依賴根元素,em是依賴父元素計算。 

2.爲何要用rem呢？

首先咱們要了解移動端最麻煩的是什麼？因爲不一樣分辨率的適配，具體來講，有的屏幕寬750px，有的屏幕寬640px，有的甚至更寬，致使若是你寫固定px，那麼要麼小的放不滿，要麼大的有大片留白。然而咱們用rem能夠有效解決這個問題。

3.如何用rem實現頁面等比例適應設備呢？

解決方法：rem + less + 媒體查詢

（1）動態設置html標籤font-size大小

假設設計稿是750px，而後咱們把整個屏幕劃分紅15等份，每一份做爲html中的字體大小，這裏一份就是50px，那麼當設備爲750px時，一個100*100px的頁面元素在750px的屏幕下，它轉換爲rem爲單位就是2*2rem，長和寬的比例是1:1；當設備爲320px時，html字體大小爲21.33px，一個100*100px的頁面元素在320px的屏幕下，爲2*2rem，2rem=42.66px，長和寬的比例仍舊是1:1，這樣咱們就能實如今不一樣屏幕下，頁面元素盒子等比例縮放的效果。

（2）頁面元素的rem值=頁面元素值（px）/（屏幕寬度/劃分的份數）

注：1.屏幕寬度/劃分的份數 就是html中的font-size的大小

      2. 關於媒體查詢和less可自行百度

4.代碼實現