[分享]css中字体如何使用em

CSS中，字体的单位除了常见的px，还有em，那么什么是em？如何使用em作为字体单位呢？em是一个相对单位，它是相对于元素自身字体大小的倍数来计算。比如，一个元素的字体大小为16px，而它内部的某一...

CSS中，字体的单位除了常见的px，还有em，那么什么是em？如何使用em作为字体单位呢？

em是一个相对单位，它是相对于元素自身字体大小的倍数来计算。比如，一个元素的字体大小为16px，而它内部的某一个子元素的字体大小设置为0.5em，那么这个子元素的字体大小就为16px*0.5=8px。

使用em作为字体单位的好处是，可以让字体随着父元素的字体大小而自适应。比如，当你在手机上浏览网页时，你可能想让字体变小一些，以适应屏幕大小。而如果你使用em作为字体单位，只需要改变父元素的字体大小，所有子元素的字体大小都会自动调整。这使得网页更加灵活和易于维护。

/* 使用em作为字体单位的例子 */

body {
  font-size: 16px;
}

h1 {
  font-size: 2em; /* 相当于32px */
}

p {
  font-size: 1em; /* 相当于16px */
}

.footer {
  font-size: 0.8em; /* 相当于12.8px */
} 

在上面的例子中，body元素的字体大小为16px。h1元素的字体大小为2em，即32px。而p元素的字体大小为1em，即16px。最后，.footer元素的字体大小为0.8em，即12.8px。

需要注意的是，em是一个相对单位，因此如果你要使用em作为字体单位，需要先确定父元素的字体大小。如果你不确定父元素的字体大小，可以使用rem作为字体单位，rem是相对于根元素（即html元素）的字体大小来计算的。这样可以避免字体大小的不确定性。