[分享]css中em和rem的区别

在CSS中，有两种用于设置字体大小的单位：em和rem。虽然它们看起来很相似，但它们有着很大的不同之处。em单位是相对于父元素的字体大小来计算的。例如：父元素 { fontsize: 16px; } ...

在CSS中，有两种用于设置字体大小的单位：em和rem。虽然它们看起来很相似，但它们有着很大的不同之处。

em单位是相对于父元素的字体大小来计算的。例如：

父元素 { font-size: 16px; }
子元素 { font-size: 1.2em; } 

这里子元素的字体大小将会是 16px * 1.2 = 19.2px。

rem单位则是相对于根元素（即HTML元素）的字体大小来计算的。例如：

html { font-size: 16px; }
子元素 { font-size: 1.2rem; } 

这里子元素的字体大小将会是 16px * 1.2 = 19.2px。

需要注意的是，如果根元素的字体大小发生变化，使用rem单位的元素的字体大小也会随之变化。而使用em单位的元素的字体大小只会相对于当前元素的父元素计算。

使用em和rem单位的选择，取决于你的具体需求。如果你需要一个相对于父元素的字体大小，那么使用em单位是更好的选择。如果你需要一个相对于根元素的字体大小，并且希望其在不同分辨率下保持一致，那么使用rem单位是更好的选择。