這是我第一次建立自己的個人關于工作的博客，由于在工作中經常能碰到頁面適配的問題，所以，這幾天就專門抽出時間來研究一下這個手機適配的問題，如有問題，歡迎大家來提意見！
響應式網頁不僅僅是響應不同類型的設備，而且需要響應不同的用戶需求。響應式的初衷是為了讓信息更好的傳遞交流，讓所有人無障礙的獲取信息，同時這也是 Web 的初衷
說到適配，首先我先考慮到的就是單位。網頁中常用的文字大小單位是 px(Pixels)，em，現在《CSS Values and Units Module Level 3》中新增了 rem 這個單位。
一、什么是 rem 呢？
「rem」是指根元素（root element，html）的字體大小，好開心的是，從遙遠的 IE6 到版本帝 Chrome 他們都約好了，根元素默認的 font-size 都是 16px。也就是說，在css樣式中，所有的元素大小是根據根元素大小來定義的。這樣一個新的單位兼容性如何呢？請出 Caniuse 看看吧：
由上圖可以看出IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以任意的使用 rem 了。
那么，會有人問，這個rem和em又有什么區別呢？
EM特點
-1. em的值并不是固定的；
-2. em會繼承父級元素的字體大小。
我們知道 em 的計算是基于父級元素的。
請看以下例子：
以上代碼，我給body設置的字體是16px，選擇器content大的大小是相對于它的根元素body來定義的，也就2em=2*16px=32px；反之，如果我希望content的字體是32px，那么就要32/16=2em。大家還可以看下，我給這個conten設置了一個width，是20em，那為什么它的寬度不是320px，這就是因為content的width是相對于它自身的font-size來定義了，這個時候content的font-size大小是32px，所以他的寬度應該是640px；也就是說，div的font-size是繼承父元素的大小，而width是相對于它自身來定義的。事實上，不僅是width，子元素中除了font-size的em是根據父元素的font-size確定的，其他所有em都是根據自身的font-size確定的。
接下來，我在content里面繼續嵌套一個div，我希望它的字體是12px
運行效果
打印效果：
還有一種情況，就是當子元素自身已經定義好font-size，也就是它的font-size是px時候，那么它的寬度也是根據自身的font-size來改變
運行效果：
打印結果
由此看出，在不設置元素font-size的情況下，em總是根據父元素的font-size來確定長度；即使元素設置了font-size，多次嵌套使用em也往往會造成疏忽，不僅使用前需要大量計算，而且不能保證沒有漏網之魚。這將是一個繁雜而低效率的工作。
接下來我們正式來說說這個rem
?rem 的出現解救了我這樣不會算術的人，再也不用擔心父級元素的 font-size 了，因為它始終是基于根元素（html） 的。
比如默認的 html font-size=16px，那么我想設置12px 的文字就是：12÷16=0.75（rem），html中的所有標簽樣式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大膽的用rem作單位。
比如你設置根元素html的font-size：20px，那么1rem=20px；此時，寬60px，高100px的元素樣式就可以寫成
width：3rem；?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? height：5rem；
那么我們如何來使用這個rem呢？這里我找到一篇來自_minooo的文章分享，他在里面很詳細的介紹了rem的用法，下面的鏈接可以進去認真看下
當然，你可以引入 CSS 預處理工具（Sass、LESS 、Stylus等）自動計算 rem 值，這里就不一一舉例了。
