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

Question

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

使用动态样式表（如Sass或Less）很容易实现mixins或函数来处理数学背后的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;
}

  

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

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