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

【问题标题】：Detect relevant font-size and containing block width检测相关字体大小和包含块宽度
【发布时间】：2014-10-22 05:59:59
【问题描述】：

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

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

您知道是否有某种类型的实用程序可以自动执行此操作吗？是否以某种方式做出了某种努力来实现它？

【问题讨论】：

您是否尝试根据容器宽度设置字体大小的样式？
不，我说的是任何垂直空间（行高、顶部填充、底部填充）的样式（相对于相关字体大小）和任何水平空间（宽度, paging-left, padding-right) 以百分比为单位（相对于包含块的宽度）。

标签： css sass less fluid-layout

【解决方案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;
}

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

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

【讨论】：