0

在为流体布局和可调整大小的文本网页设置样式时，您必须始终牢记相关的字体大小（对于 em 的单位）和包含当前样式元素的块宽度（百分比单位）。总是需要注意哪个是父元素的宽度，或者您是否已经修改了当前元素或其祖先之一的字体大小，这是一个宽松的时间。

使用动态样式表（如 Sass 或 Less）很容易实现 mixins 或函数，它们关心 em 和百分比计算（简单除法）背后的数学，所以你可以以像素为单位写大小而忘记翻译，但无论如何你有提供相关的字体大小和包含块宽度，因为据我所知，无法自动检测它们。

你知道是否有某种类型的实用程序可以实现自动化吗？是否已经做出某种努力以某种方式实现它？

4

1 回答 1

1

您不能使用父级的计算属性值在 CSS 中设置子级的属性。LESS 或 SASS 不会改变这一点。但是可以相对于它们的父级（或使用 rem 单位时的根）来设置大小。

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size)

相关字体大小是父设置的字体大小。当您将子元素的字体大小定义为 0.5em 时，其字体大小将比其父元素的字体大小小 50%。

例如，您可以使用 Less / SASS 将 0.5em 声明为变量。这使您可以在一个地方更改和编辑它。

较少的

@basefont: 1em;
@smallfont: 0.5em;

section {
font-size: @basefont;
article {
font-size: @smallfont; // or @basefont / 2;
}
}

footer {
font-size: @smallfont;
}

以及以百分比为单位的任何水平空间（宽度、左分页、右填充）（因此相对于 > 包含块的宽度）。

百分比单位已经相对于父级（包含块）。

于 2014-10-21T21:59:59.793 回答