em和rem用過幾次，但都模模糊糊的看別人怎麼用的，自己也跟著這麼用，好些地方都特別疑惑，今天抽時間看了一些文章，自己總結一下。

css 中的  px 是css設定自己大小，元素長寬的單位，比如font-size=16px; width:200px height:300px

網頁文件中最頂層的節點是document,這個在我們頁面節點程式碼中是看不到的。document之後是html節點，html節點也是整個文件的根節點。

根節點這個概念很重要，因為rem和en都和這個跟節點有關係。

還有一個概念是瀏覽器中網頁的預設字型大小是多少？

比如我們直接在body中寫一段文字，這個文字大小是多少？

很明顯是16px，所以瀏覽器文件的預設字型大小就是16px

文件中字型大小是可以繼承的，html節點繼承document文件字型大小也變成16px，body繼承html節點字型大小也變成了16px。要是這時候我在html節點設定font-size:12px會怎麼樣呢，很明顯，後面設定的html會把繼承自documen的t預設字型大小給覆蓋了，html節點字型大小就變成了12px。

瀏覽器中em和px關係是  16px 等於 1em 也就是說font-size:'16px' 可以寫成 font-size:'1em';

為什麼是1em=16px呢？不是17px,18px 。因為em是根據根節點，也就是html預設字型大小來設定大小的。所以改變了html根節點字型大小，em的預設值也會改變。向上面html設定為12px，那麼1em=12px

em還有一個特性就是繼承，子節點繼承父節點的字型大小。

html我設定了font-size大小為10px，1em等於html根節點大小，所以1em = 10px 了 ，我在box中寫了 font-size:2em,  就是 “重中之重做做做做做做做” 幾個字 

大小就是20px大小了，因為box繼承body，body繼承html。

而p標籤我設定了 font-size:1em;  <p>中國館過過過過過</p> 他的字型還是20px 因為em是子節點繼承父節點大小的。

而rem不是子節點繼承父節點大小，而是所有的節點都繼承html節點，所有當html節點設定成10px時候，所有整個頁面1rem就等於10px了

但是當你自己寫demo試驗的時候，發現html設定了10px時候，1rem不等於10px 而等於12px，而1.2rem時候還是等於12px，1.4rem就等於14px了。

這是因為瀏覽器最小字型是12px，小於12px就等於12px。

參考文章 http://www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html

元素的寬高和html設定的fontsize大小有什麼關係呢？我一直不知道，寫了些demo，總結了一點。

如果html設定font-size:'62.5%' /* 當等於16px * 62.5% = 10px*/

因為瀏覽器預設小於12px就等於12px，所以當rem用於長度時候，直接就是1rem=12px,這一點和字型不一樣。

那麼width：1rem 等於 width：1*12px   

   width: 1.2rem 等於 width : 1.2*12px

總結：當寫響應式的時候，html的字型還是設定成font-size:16px(相當於預設值)

意義：使用rem和em的意義，我開始做響應式的時候都不知道rem和em使用的意義在哪裡，只看到人家用，自己就用，用了幾次，感覺不到好處，直接放棄了，還是用px了，下面就是em和rem的意義。

 思考：當平板過渡到pc端的時候，字型大小是不是應該要變大一點，不然pc端看到的字型和平板字型一樣大小，對使用pc開啟網頁使用者來說就小了很多。又當平板過渡到手機端的時候，字型是不是又要變小一點，不然對使用手機使用者來說，平板看到的字型大小正好，到手機就會感覺大了一點。這個時候你設定用媒體查詢來設定html根節點的大小來控制rem大小就很方便了。

@media screen and (max-width:768px){ /*注意and 要和後面括號有一個空格*/

html{font-size:62.5%!import}; /*1rem = 10px*/

}

@media screen and (max-width:1280px){

html{font-size:75%!import} /* 相當於1rem = 12px */

}

@media screen and (max-widht:1920px){

html{font-size:87.5%!import} /*相當於1rem = 14px*/

}

 突然出現一個問題：max-width這裡的px是多少 ？？那怎麼計算的。

參考這一篇文章， http://www.w3cplus.com/css/media-query-units.html

其實 max-width後面應該用em 

@media screen and (max-width:90em){/*1440px*/ em換算是根據1em=16px換算的
html{font-size:100%;}
    .box{width:20rem;height:100px;border:1px solid red;color:#0F9932}
}
@media screen and (max-width:80em){ /1*280px*/
html{font-size:87.5%;}
    .box{width:20rem;height:100px;border:1px solid #000000;color:#0000cc;}
}
@media screen and (max-width:48em){/*768px*/
html{font-size:75%;}
    .box{width:20rem;height:100px;border:1px solid #3B5900;color:deeppink;}
}

  再總結：根節點html設定為16px 這時1em=1rem=16px 文件內的字型和元素寬高行高都是這麼換算，而後在媒體查詢中改變了html的font-size

@media srceen and (max-width:90em){

html{font-size:120%;}

}

這時文件內的字型和元素寬高行高又變成了1em=1rem=16*120%=19.2px了

而媒體查詢內的max-width:90em 還是等於1em=16px  90em=1440px   ,因為em是根據瀏覽器自身設定的預設字型來換算的，和我們html的改變沒有關係。