CSS 字体单位em简介

CSS 字体单位em简介

在CSS中，我们常使用像素（px）作为字体大小的单位。但是，随着Web的不断发展，越来越多的网站采用了响应式设计，而px固定的大小不符合响应式设计所需，因此em成为了更好的选择。

em是什么？

em是一个相对单位，根据其父元素的字体大小而定。一般而言，1em等于父元素的字体大小。比如，如果一个段落的字体大小被设置为1.2em，那么字体大小将会比它的父元素的字体大小大20%。

em的好处

1. 继承自父元素的字体大小，能够帮助我们在响应式设计中能够更好地调整字体大小。
2. 与px不同，em可与浏览器的默认字体大小结合使用，提高浏览器兼容性和可访问性。
3. 对于含有嵌套标签的文本，使用em会更加方便（可以减少计算字体大小所需要的步骤）。

如何使用em？

作为例子，我们来看一段HTML代码：

<h1>使用em作为标题字体大小的单位</h1>
<p>这是一个段落内容，其字体大小为1.2em，相对于父元素的字体大小而定。</p>

我们给body设置一个字体大小为16px，然后对标题使用2em，对段落使用1.2em：

body{
  font-size:16px;
}

h1{
  font-size:2em;
}

p{
  font-size:1.2em;
}

上面的代码将会使标题的字体大小为32px，而段落的字体大小为19.2px。

以下是另一个例子：

div{
  font-size: 16px;
}

p{
  font-size: 1.2em;
}

上述代码会将段落中的字体大小设置为当前div元素中字体大小的 1.2 倍。

总结

在响应式设计中，em可以帮助我们更好地调整字体大小。通过使用相对单位，我们可以使网站更加易于访问，并提高浏览器的兼容性。但是在使用em作为字体大小的单位时，我们需要注意继承关系及不同元素的默认字体大小，切记过分依赖浏览器的默认字体大小，以便保证最佳的用户体验。