相对字体大小

时间:2012-04-13 13:24:39

标签: jquery

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

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

现在我使用相同的东西将相同的元素附加到主页面主体但我得到两个字体大小相同的大小。这是div内部和身体之一。我想要的是在追加div时获得相对于div的大小。

3 个答案:

答案 0 :(得分:0)

你试过“font-size:1em”吗? ems也是相对测量的单位。 1em表示与父元素相同的大小。

答案 1 :(得分:0)

W3C推荐使用em尺寸单位。 1em等于当前的字体大小。浏览器中的默认文本大小为16px。因此,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/

答案 2 :(得分:0)

实现此目的的方法是使用 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/,它详细解释了相对字体大小。