<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">因為在公司以後都是移動端前端開發，傳統的用px作為單位顯然不切實際。因此我們要使用相對單位em和rem。</span>

這兩個其實沒什麼本質區別，只是相對的不一樣。em 是以父元素的字型大小為參照。比如父元素是12px，你給子元素1em,他其實就是12px長。

下面舉例說明：這是html的結構

     <div id="fa">
        <div id="a">a
<span style="white-space:pre">			</span><div id="a2">a2</div>
        </div>
<span style="white-space:pre">		</span><div id="b">b</div>
<span style="white-space:pre">		</span>
<span style="white-space:pre">	</span></div>
<span style="white-space:pre">	</span><div id="c">c</div>
 

	#fa{font-size: 20px;}
		#a{font-size: 1em;}      /*20px*/
		#a2{font-size: 0.8em;}   /*16px*/
		#b{font-size: 0.8em;}    /*16px*/
		#c{font-size: 0.8em;}      /*12*0.8*/

這樣計算顯然很麻煩，所以有了rem這個單位。

rem始終根據瀏覽器根節點字型來選取值，比如你設定瀏覽器字型為12px以後，你之後所有計算都是px除以12就可以，非常方便，不用擔心因為設定字型導致div變形。

另外很多人喜歡把根節點設定成10px這樣計算特別方便，但是要注意其實這樣做未必可取，因為chrome最小字型是12px所以在chrome並不齊作用，你的1em 還是相當於12px而不是10px。

用rem作為單位顯然很有優勢，是移動端開發適配的小幫手。