px、em、rem的區別
在css中單位長度用的最多的是px、em、rem，這三個的區別是：
一、px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。
二、em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式佈局。
三、em是相對於其父元素來設定字型大小的，一般都是以<body>的“font-size”為基準。這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小。
而Rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值。
總之：對於em和rem的區別一句話概括：
em相對於父元素，rem相對於根元素
一、em
（一）子元素字型大小的em是相對於父元素字型大小
（二）元素的width/height/padding/margin用em的話是相對於該元素的font-size
上程式碼：
在瀏覽器中預設字型尺寸為16px，換句話說1em=16px;那麼0.75em=12px,0.625em=10px。
為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px 1.2em=12px, 1em=10px
body{ font-size: 62.5% } div{ width:10em; //100px height:10em;//100px
border:0.1em solid #ccc;
}
</style>
html：
<div> 父元素div <p> 子元素p <span>孫元素span</span> </p> </div>
css：
div { font-size: 40px; width: 7.5em; /* 300px */ height: 7.5em; border: solid 2px black; } p { font-size: 0.5em; /* 20px */ width: 7.5em; /* 150px */ height: 7.5em; border: solid 2px blue ; color: blue; }span { font-size: 0.5em; width: 7em; height: 6em; border: solid 1px red; display: block; color: red; }
結果如圖：
二、rem
rem是全部的長度都相對於根元素，根元素是誰？<html>元素。通常做法是給html元素設定一個字型大小，然後其他元素的長度單位就為rem。
上程式碼：
html：
<div> 父元素div <p> 子元素p <span>孫元素span</span> </p> </div>
css:
html { font-size: 10px; } div { font-size: 4rem; /* 40px */ width: 20rem; /* 200px */ height: 20rem; border: solid 2px black; } p { font-size: 2rem; /* 20px */ width: 10rem; height: 10rem; border: solid 1px blue; color:blue ; } span { font-size: 1.5rem; width: 7rem; height: 6rem; border: solid 2px red; display: block; color: red; }
結果如圖：
總結一
在做專案的時候用什麼單位長度取決於你的需求，我一般是這樣的：
1、畫素（px）：用於元素的邊框或定位。
2、em/rem：用於做響應式頁面，不過我更傾向於rem，因為em不同元素的參照物不一樣（都是該元素父元素），所以在計算的時候不方便，相比之下rem就只有一個參照物（html元素），這樣計算起來更清晰。
總結二
1、rem 和 em 單位是由瀏覽器基於你的設計中的字型大小計算得到的畫素值。
2、em 單位基於使用他們的元素的字型大小。
3、rem 單位基於 html 元素的字型大小。
4、em 單位可能受任何繼承的父元素字型大小影響
5、rem 單位可以從瀏覽器字型設定中繼承字型大小。
6、使用 em 單位應根據元件的字型大小而不是根元素的字型大小。
7、在不需要使用em單位，並且需要根據瀏覽器的字型大小設定縮放的情況下使用rem。
8、使用rem單位，除非你確定你需要 em 單位，包括對字型大小。
9、媒體查詢中使用 rem 單位
10、不要在多列布局中使用 em 或 rem -改用 %。
11、不要使用 em 或 rem，如果縮放會不可避免地導致要打破布局元素。
需要注意的是：
樣式的reset中需先設定html字型的初始化大小為50px，這是為了防止js被禁用或者載入不到或者執行錯誤。
而做的相容樣式的reset中需先設定body字型的初始化大小為16px，這是為了讓body內的字型大小不繼承父級html元素的50px，而用系統預設的16px
轉自：https://www.cnblogs.com/webdragon/p/11185979.html
//100px