標籤：
一.首先介紹一下pxpx就是css中最基本的長度單位了，用px做單位基本上沒什麼問題，可以做到讓頁面按套路精確的展現！
可但是！但可是！如果全篇用px布局會暗藏一個蛋疼的問題，就是當使用者和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，因此有磚家倡導使用em替代px。。。。。
二.接下來介紹一下em如果你從上到下閱讀此文，你應該已經知道了em出現的原因，下面說說em的特性，簡單的講px是絕對單位，1px就是1px，2px就是2px，以此類推，而em是相對單位，em相對的基準點就是瀏覽器的字型大小，瀏覽器預設字型大小是16px，也就是1em預設等於16px，如果你想給某個文字設定為14px，就這樣寫 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那麼就是15/16=0.938em, 例如margin:0.938em; 依次類推，樣式表都用em來寫的話，就可以解決ctrl+，ctrl-時造成的頁面錯亂問題,常用em對照表如下
這時候有人和我一樣就會抱怨了，我的數學是體育老師教的，除以16我怎麼可能算明白，那好辦你可以在根節點<html>上重定義基準字型大小 html {font-size:62.5%} ，此時頁面基準字型大小就是 16px * 62.5% = 10px , 那麼此時 1em = 10px，那麼此時14px = 1.4em，15px=1.5em，依次類推，就算你數學是要飯的教的應該也會算了吧-。-！
可但是！但可是！問題又來了，em準確的說是相對於父節點的字型大小來計算的，如果自身定義了字型大小那麼就相對自身字型大小來計算，舉例如下：
html { font-size: 100%; }.box-0 { height: 1em; /* 此時height等於16px */}.box-1 { font-size: 0.625em; /* 此時基準字型大小以變更為16*0.625=10px */ height: 1em; /* 此時實際height等於10px */}
看明白了吧，在整個頁面內1em並不是一個固定不變的值，1em不停的變換，再加上數學是體育老師教的，這不是自作孽嗎。。。沒關係，css3為我們引入一個新的單位就是rem可以解決這個問題
三.最後介紹一下主角remrem和em一樣也是一個相對單位，為了方便理解，我們就理解rem為root em，顧名思義rem只相對跟節點<html>計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，預設1rem=16px; 同理你可以設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。
聲明一下：rem是css3屬性，沒錯！這就是說屌絲ie678不支援rem屬性，只有chrome、firefox等高富帥支援！那麼我們就在ie678中用px做相容處理，例如：
.box { font-size: 14px; /* 用來相容ie678 */ font-size: 0.875em; }
詳細講解css單位px,em和rem的含義以及它們之間的區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
