在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
上代碼：
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