是否可以使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
感谢大家的回答和帮助!
答案 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>
<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;
这是您的代码:
<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