格言:努力做好自己喜歡的每一件事
國內的設計師大都喜歡用px，而國外的**大都喜歡用em和rem，那麼三者的區別與優勢是什麼？接下來我們就來學習一下吧！
單位px、em、rem分別表示什麼？
1、px(pixel) 相對於顯示器解析度而言，表示「絕對尺寸」（並非真正的絕對），實際上就是css中定義的畫素（這裡的畫素與裝置的物理畫素有一定的區別），利用px設定字型大小及元素寬高等比較穩定和精確。px的特點如下：
2、em表示相對尺寸，其相對於當前物件內 (父級元素)文字的字型尺寸font-size（如當前對行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合：1em = 16px。）。使用em可以較好的相應裝置螢幕尺寸的變化，但是在進行元素設定時都需要知道父元素文字的font-size及當前物件內文字的font-size，如有遺漏可能會導致錯誤。em的特點如下：
3、rem為css3新增的乙個相對單位，使用rem為元素設定字型大小時，仍然是相對大小，但是rem只相對於html根元素的font-size，因此只需要確定這乙個font-size。使用rem的好處是只修改根元素就可以成比例的調整所有字型的大小，又可以避免字型大小逐層復合的連鎖反應。
目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。以下是我在 caniuse對rem屬性的相容表：
對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。如下：
元素1、 px與em之間的換算關係
任意瀏覽器的預設字型大小16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em，這樣換算起來有點麻煩，而且容易換算出錯。所以，為了簡化font-size的換算，我們可以制定乙個單位換算基準：需要在css中的body選擇器中宣告font-size=62.5%，**如下：
body總結：我們在寫css的時候，需要注意以下兩點：
1）body選擇器中宣告font-size=62.5%；
2）將你的需要轉換的px數值除以10，然後換上em作為單位；
3）重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。
我們來舉乙個例子來說明一下：
你猜我字型是多大？em
body
divp
p的字型大小是怎麼計算的呢？因為em相對於當前物件內 (父級元素)文字的字型尺寸，p是div的子元素，div是body的子元素，要想的到p的字型大小就要先的到div的字型大小，因為body選擇器中宣告了font-size=62.5%，所以div的字型大小為1.2*10=12px，相當於div宣告了font-size=75%（1em=12px），因為p：1.2em，所以p的字型大小轉換為px:12*1.2=14.4px。這裡就應證了em單位的缺點。
2、 px與rem之間的換算關係
從上面可以得到rem是乙個相對大小的值，它相對於根元素，瀏覽器的預設字型尺寸也是16px。這時 px與rem之間的換算是1rem=16rem。下面是預設16px與rem之間的轉換關係：
pxrem
1212/16 = .75
1414/16 = .875
1616/16 = 1
1818/16 = 1.125
2020/16 = 1.25
2424/16 = 1.5
3030/16 = 1.875
3636/16 = 2.25
4242/16 = 2.625
4848/16 = 3
比如假設，我們設定html的字型大小的值為html｛font-size: 87.5%;｝（也就是1rem=14px）。然後其他的字型大小就是將你要的值除以14得到的值加上rem單位。上面的14是個變數，相對於你對根元素html字型大小的設定，如果你設定的是62.5%，那除數就變成10了。如果你根元素的字型大小選62.5%，那px和rem之間的換算就是px直接除以10就得到rem了。為了簡化font-size的換算，我們在html中也可以寫入以下**:
htmlpxrem
1212/10 = 1.2
1414/10 = 1.4
1616/10 = 1.6
1818/10 = 1.8
2020/10 = 2.0
2424/10 = 2.4
3030/10 = 3.0
3636/10 = 3.6
4242/10 = 4.2
4848/10 = 4.8
我們來舉乙個例子來說明一下：
你猜我字型是多大？rem
html
divp
p的字型大小是怎麼計算的呢？因為rem只相對於html根元素的font-size，所以rem 以html為轉換基準 公式16px*62.5%=10px相當於1rem=10px，然後就可以得到p的字型大小：10*2rem=20px。
注意：
總的來說，為了簡化font-size的換算，我們通常將rem與em的換算基準設定為font-size : 62.5%;，則此時1rem=1em = 16px * 62.5% = 10px， 這樣10px = 1em=1rem，方便於我們使用。
區別css單位px em rem
一般瀏覽器預設1em 16px，通過設定font size大小來代表如 16px 0.625 10px，其則代表1em 10px，直接上 注釋的樣式為瀏覽器預設 1em 16px 的長寬 在進行轉換之前，我們一定要檢視瀏覽器預設字型 最小 大小，如chrome瀏覽器，預設字型最小為12px，所以即使...
CSS尺寸單位 px em rem 詳解
在css中，尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸，它們採用的是物理度量單位 cm mm in px p...
CSS尺寸單位 px em rem 詳解
在css中，尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸，它們採用的是物理度量單位 cm mm in px p...