jquery - 相对字体大小

Question

我正在使用 jquery 通过使用简单的附加函数在 div 容器中构建一个元素，如下所示

$("#container").append("<label style='font-size:100%;'>ASAD</label>");

现在我使用相同的东西将相同的元素附加到主页正文，但我得到的两个字体大小相同。那是div里面的一个，body里面的一个。我想要的是在附加到 div 时获得相对于 div 的大小。

Answer 1

W3C 推荐使用 em 大小单位。1em 等于当前字体大小。浏览器中的默认文本大小为 16 像素。因此，1em 的默认大小是 16px。

可以使用以下公式从像素到 em 计算大小：pixels/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

如何在 CSS
http://www.alistapart.com/articles/howtosizetextincss/中调整文本大小

Answer 2

你试过“字体大小：1em”吗？ems 也是一个相对测量单位。1em 表示与父元素大小相同。

Answer 3

实现这一点的方法是使用相对字体单位，如em或rem。em字体单元取决于容器的字体大小，而rem单元取决于根元素的字体大小。

例如，您可以将容器 div 的字体大小设置为 16px，并且使用em单位设置任何子元素的字体大小将使其相对于容器 div。

div { font-size: 16px }

div>p  {
  font-size: 1.5em; //this will be equal to 24px
}

在p元素上，1em 等于 16px，这意味着1.5em 将等于 24px。

这里有一篇很棒的文章https://kolosek.com/css-relative-font-size/，详细解释了相对字体大小。