CSS中的em和rem單位是相對(duì)于元素的父級(jí)元素的字體大小來計(jì)算的長度單位。

通常，使用em單位時(shí)，其大小根據(jù)父元素的字體大小進(jìn)行計(jì)算。例如，如果父元素的字體大小為16px，1em就等于16px。但如果一個(gè)元素有多級(jí)父元素，每個(gè)父元素的大小都不同，就會(huì)導(dǎo)致計(jì)算em單位變得復(fù)雜。

/* 例如：
html {
font-size: 14px;
}
body {
font-size: 1.2em; /* 相當(dāng)于 14px * 1.2 = 16.8px */
}
h1 {
font-size: 2em; /* 相當(dāng)于 16.8px * 2 = 33.6px */
}*/

在使用em單位時(shí)，由于其基于父元素字體大小計(jì)算尺寸，所以當(dāng)父元素的字體大小被修改時(shí)，所有的em單位都將發(fā)生改變。這可能會(huì)導(dǎo)致一個(gè)頁面上的所有元素大小一起改變，這并不是我們想要的效果。

相比之下，rem單位是根據(jù)HTML文檔中的根元素（即html元素）的字體大小來計(jì)算的。通常情況下，HTML文檔的根元素大小被設(shè)置為16px。所以設(shè)置一個(gè)元素為1rem，它的字體大小就為16px。

/* 例如：
html {
font-size: 14px;
}
body {
font-size: 1.2rem; /* 相當(dāng)于 14px * 1.2 = 16.8px */
}
h1 {
font-size: 2rem; /* 相當(dāng)于 16px * 2 = 32px */
}*/

使用rem單位，我們可以在不影響其他元素的情況下，更改頁面上的單個(gè)元素大小。另外，使用rem單位也更加簡單，不需要在多個(gè)父級(jí)元素中跟蹤字體大小。

總結(jié)來說，em單位是基于父元素大小計(jì)算，而rem單位是基于HTML根元素大小計(jì)算。兩者的用法都有很多不同的優(yōu)缺點(diǎn)。好的網(wǎng)站或應(yīng)用程序應(yīng)該考慮這些因素并選擇最適合自己的使用方式。