css - 计算流式/响应式布局中的边距和填充高度

Question

我了解如何计算 margin-left/padding-left 和 margin-right/padding-right 采用流畅/响应式布局。但是 margin-top/padding-top 和 margin-bottom/padding-bottom 呢？

例如，我有这段代码:

header h1{padding:10px 0 0 15px;}

当我将其转换为流体布局时，得到:

header h1{padding:10px 0 0 8.823529411765%;}

如何转换 padding-top？通过 16px(正文字体大小)潜水？当我这样做时，结果超过 10px 有效。

Answer 1

如果您希望边距和填充响应字体的大小，最好为您的单位使用 em。虽然由于继承而变得复杂，但 em 是一个打印单位，表示 1 行文本的垂直高度。有关详细信息，请参阅 Jon Tangerine 的文章:

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

此外，Jon 还提供了 px 到 em 的转换表: http://jontangerine.com/silo/css/pixels-to-ems/

虽然将 em 用于行高和边距之类的东西很常见，但您也可以将它们用于字面上的任何属性来代替像素。