在CSS中,字体大小有许多种单位可以使用。em和rem是两种常见的单位,它们有什么不同呢?
p{ font-size: 1.2em; }
em是相对单位,它是相对于当前元素的字体大小来计算的。例如,如果一个元素的字体大小是16像素,那么1em就相当于16像素。所以如果这个元素中的某个元素设置了字体大小为1.2em,那么计算出来的实际大小就是1.2 * 16 = 19.2像素。
p{ font-size: 16px; } span{ font-size: 1.2em; }
rem是相对于根元素(通常指html元素)的字体大小来计算的。所以如果根元素的字体大小是16像素,那么1rem就相当于16像素。这样可以确保整个页面中使用的字体大小都是相对于根元素的字体大小来计算的,保证了页面的一致性。例如,如果我们在根元素中设置字体大小为16像素,那么
html{ font-size: 16px; }
在某个子元素中设置字体大小为1.2rem,那么它的实际大小就是1.2 * 16 = 19.2像素。和em不同的是,rem不受父元素的影响,所以它更加方便用于大型项目。