CSS中字体大小的单位不止有像素(px)、百分比(%)这些。还有一种叫做em的单位。
Em的大小是相对于其父元素的字体大小来计算的。比如,如果父元素字体大小为16px,那么子元素用1em表示的字体大小就是16px。
以下是一个例子:
父元素{ font-size: 16px; } 子元素{ font-size: 1em; /* 表示字体大小和父元素一样 */ }
如果子元素再嵌套一个子元素,那么内部子元素的字体大小就是相对于外层子元素的字体大小来计算的。比如:
父元素{ font-size: 16px; } 子元素{ font-size: 1.2em; /* 表示比父元素的字体大小大20% */ } 内部子元素{ font-size: 0.8em; /* 表示比外层子元素的字体大小小20% */ }
使用em作为字体大小单位的好处是,可以实现响应式字体大小。如果页面响应式调整了容器大小,同时也会自适应调整字体大小。这样可以避免因为字体大小固定而导致在小屏幕设备上出现超长的文字堆积。
总之,em单位可以让网页设计师更好地掌握字体大小的相对大小,实现自适应响应式布局。