问题描述
我想使用相对尺寸而不是固定尺寸。我想使用em。
I want to use relative size instead of fixed size. I want to use em.
我的CSS是：
body{
font:10px;
}
#wrap {
font:1.2em;
}
#wrap ul li {
padding-left:2em;
}
li 的填充在px？我会猜测它是2.0 * 10 = 20px，但它看起来像是采取1em = 12px，我的意思是它的父大小。
What is value of the li's padding in px? I would have guessed it's 2.0*10 = 20px, but it looks like it's taking 1em = 12px, I mean it taking it parent size.
我想要它在px中使用1x父级字体大小（即 body 而不是 wrap 的字体大小）。
I would like for it to take 1x the parent fontsize in px (that means font-size of body not wrap).
感谢您的建议。
推荐答案
ems总是相对于其父元素你说。此外，元素的非字体尺寸总是相对于其字体尺寸计算的 - 即如果你说 font-size：1.2em; padding：2em 2x的字体大小是其下一个定义的父元素的大小的1.2倍。
ems are always relative to their parent element, as you stated. Additionally, an element's non-font dimensions are always calculated relative to its font dimensions - i.e. if you say font-size:1.2em;padding:2em - that element's padding will be 2x the font size which is 1.2x the size of its next defined parent element.
解决方案是使用更多的数学。如果你的包装器元素是1.2em，你想要一个内部元素填充是基准大小的两倍，你应该使用 t = i * x ，其中 t 是目标大小， i 是继承的大小， x 。所以对于我们的情况，2em是目标大小; 1.2em是继承的大小：
The solution is to use more math. If your wrapper element is 1.2em, and you want an inner element padding to be double the baseline size, you should use t=i*x, where t is target size, i is inherited size, and x is the desired size. So for our case, 2em is the target size; 1.2em is the inherited size:
2em = 1.2em * x => x = 1.67
所以填充应为 1.67em 。
这篇关于在CSS中使用relative而不是固定大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！