在CSS中使用relative而不是固定大小 [英] Using relative instead of fixed size in CSS

问题描述

我想使用相对尺寸而不是固定尺寸。我想使用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而不是固定大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！