使em单位相对于不是父母的祖先

时间:2017-10-13 17:34:23

标签: javascript jquery html css html5

是否可以使em单位相对于外部段落元素而不是它的直接父级?覆盖级联?

在下面的示例中,单词world的{​​{1}}将最终(1.5em x 1.2em x 1em)大。

在保持相同的html结构的同时,我们能以某种方式使它(1.5em x 1em)变大吗?

font-size

更新

在我的情况下,简单地使用<p style="font-size:1em;"> <span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>. </span> </p> 单位似乎是最好的。它受IE 9+支持(除Chrome 4 +,Firefox 3.6 +,Opera 11.6+和Safari 4.1 +外)

rem表示根元素的字体大小(通常为rem)。在根元素font-size中使用时,它表示其初始值(常见浏览器默认值为16px,但用户定义的首选项可能会修改此值)。

https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem

<html>选择文档的根元素:HTML格式为:root

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

<html>

HTML:

/* css */
:root {
    font-size: 1em;
}

也可以单独使用em单元,这可以通过css <span style="font-size:1.2rem"> Hello <!-- this is 1.2em (relative to <html> root) --> <span style="font-size:1.5rem">world.</span> <!-- this is nested but still only 1.5em (relative to <html> root) --> </span> 函数(IE 9+也支持)和一些javascript来解决。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

感谢大家的回答和帮助!

1 个答案:

答案 0 :(得分:1)

也许calc()功能可以提供帮助:

<p style="font-size:1em;">
  <span style="font-size:1.2em"> Hello 
     <span style="font-size:calc(1.5em * (1/1.2))">world</span>. 
  </span>
</p>

&#13;
&#13;
<code>What you have:</code>
<p style="font-size:1em;">
  <span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>. </span>
</p>

<hr>

<code>What you want, by using calc() function:</code>
<p style="font-size:1em;">
  <span style="font-size:1.2em"> Hello <span style="font-size:calc(1.5em * (1/1.2))">world</span>. </span>
</p>
&#13;
&#13;
&#13;

说明

这是您的代码:

<p style="font-size:1em;">
    <span style="font-size:1.2em"> Hello <span style="font-size:1.5em">world</span>.</span>
</p>

我们假设body元素设置为16px,并且是p元素的父元素。

由于em个单位相对于父级,这意味着p的字体大小为16px。

1em = 16px

因此,p的孩子 - 第一个span - 的字体大小为19.2px。

1.2em * 16px = 19.2px

span的孩子 - 另一个span - 的字体大小为28.8px。

1.5em * 19.2px = 28.8

您希望第二个span为24px,这是其祖父母(16px)乘以1.5的字体大小。

所以这就是计算:

font-size: calc(1.5em * (1/1.2))

1em / 1.2em     = .833em
1.5em * .833em  = 1.25em
1.25em * 19.2px = 24px