在 CSS 中使用相对而不是固定大小答案

【问题标题】：Using relative instead of fixed size in CSS在 CSS 中使用相对而不是固定大小
【发布时间】：2010-11-25 12:49:58
【问题描述】：

我想使用相对大小而不是固定大小。我想用 em。

我的 CSS 是：

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

#wrap ul li {
   padding-left:2em;
}

li 的填充像素值是多少？我猜它是 2.0*10 = 20px，但看起来它需要 1em = 12px，我的意思是它采用父尺寸。

我希望它以 px 为单位采用父字体大小的 1 倍（这意味着字体大小为 body 而不是 wrap）。

【问题讨论】：

如果你想使用em 测量，你为什么不到处使用它们呢？ IE。为什么将body 字体大小设置为 10 像素（例如，这在我的屏幕上太小了）。
@Matthew 如果您打算使用相对字体大小，您的基线应该是 10px，因为它使计算其他所有内容的数学变得更加简单，这几乎是普遍的。即使所有文本最终都是 1.2 或更大。
您有什么证据表明使用 10px 是“几乎通用的”？这似乎是一件很奇怪的事情。
没有什么是远程通用的。这是一种方法，但在我看来不是一个很好的方法。为什么要使用与预期字体大小或合理行高没有特别关系的基本字体大小？我总是使用相对字体大小，它需要大量额外的数学来控制基线，但对于结果的灵活性来说这是非常值得的。我推荐这篇文章作为入门：24ways.org/2006/compose-to-a-vertical-rhythm 在您的示例中，您无法绕过额外的数学运算。您需要 1.666em 才能获得 20px。

【解决方案1】：

ems 总是相对于它们的父元素，正如你所说的。此外，元素的非字体尺寸总是相对于其字体尺寸计算 - 即，如果你说 font-size:1.2em;padding:2em - 该元素的填充将是字体大小的 2 倍，即其下一个定义的父元素大小的 1.2 倍。

解决方案是使用更多的数学。如果您的包装元素是 1.2em，并且您希望内部元素填充是基线大小的两倍，您应该使用t=i*x，其中t 是目标大小，i 是继承大小，x 是所需的大小。所以对于我们的例子，2em 是目标大小； 1.2em 是继承的大小：

2em = 1.2em * x => x = 1.67

所以 padding 应该是 1.67em。

【讨论】：

【解决方案2】：

#wrap ul li的字体大小为10px*1.2em*2em，因此padding-left:24px；

它总是采用父元素的字体大小（在您的情况下为#wrap）

【讨论】：

感谢您的回复，是em计算的父字体大小还是父字体大小以px为单位。因为有些地方我在 PX 中读到 1em = 1/parent font-size。
1em 是字母“M”的宽度
没错，但“M”的宽度取决于字体大小。然后 1em = 1/PX 中的父字体大小
为什么是 1/font-size oO？ 1em = 父元素字体大小中字母 M 的宽度
是的，这只是我的问题。是 1em 是在父元素的字体大小中字母 M 的宽度，或者是在 PX 中具有字体大小的父元素/祖父元素的字体大小中字母 M 的宽度（如果字体大小在 PX 中未定义）。