一，px（畫素）：畫素是螢幕上顯示的最小單位，它是固定的，不隨頁面縮放而改變大小。在響應式設計中，使用畫素單位可能會導致佈局在不同螢幕尺寸上顯示不一致。
例如：現在在你電腦上一個字為16px，大小正好，可能到比你解析度要高的電腦上，字型16px大小不變，但是解析度有變化，導致字型在別的電腦上可能會導致不適配的情況發生
二，em：em是相對長度單位，它是相對於父元素字型大小的倍數。如果父元素的字型大小為16px，1em就等於16px。em單位的缺點是，當巢狀元素多層時，計算起來可能會變得複雜。
例如：這個就很好理解，就是1em就是父元素的一整個字型大小，當然，巢狀的多了容易搞混，儘量不要在巢狀多個元素的時候使用em，個人認為不太好用
三，rem：rem也是相對長度單位，但它是相對於根元素（html元素）字型大小的倍數。這意味著1rem始終等於根元素的字型大小，不受父元素影響。因此，rem更適合用於響應式設計。
例如：這個跟em的區別就是他不是看父元素，而是看根元素，因為不受父元素的影響，所以適用於自適應
四，vw（視窗寬度單位）：vw是相對於視窗寬度的百分比單位，1vw等於視窗寬度的1%。它常用於建立響應式佈局，使元素的大小根據視窗寬度自動調整。
例如：1vw就是根據可視視窗的寬度來進行適配自動調整的。一般是用於可視視窗寬度間的適配
五，vh（視窗高度單位）：vh類似於vw，不同之處在於它是相對於視窗高度的百分比單位，1vh等於視窗高度的1%。vh也常用於響應式設計中。
例如：vh跟vw是一樣的，但是vh一般是用於可視視窗高度間的適配的
總的來說，rem和em是相對長度單位，而px、vw和vh是絕對或相對絕對長度單位。在網頁設計中，選擇合適的單位取決於具體的佈局需求和設計目標。
原文連結：https://blog.csdn.net/Mxy18851251178/article/details/135435489