检测相关字体大小和包含块宽度

Question

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

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

您知道是否有某种实用程序可以使其自动化吗？是否已经做出某种努力以某种方式实现这一目标？

Answer 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;
}

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

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