计算font-size与其容器宽度的比例

Question

我正在研究字体大小和它们所在容器的最佳宽度之间的关系。我知道单列文本的最佳行宽在每行45到75个字符之间。

但也应该有一种方法来计算该文本容器的最佳宽度，如果我没有弄错的话，"Line length应该是字体大小的30倍(在20到40倍之间)“。

在我的例子中，我有：

font-size: 2.488rem;
width: 55vw;

如何将宽度大小更改为与字体大小成比例？

Answer 1

如果你的容器是基于vw (视窗)的，你可以使用font-size: Xvw，但是如果你的容器是基于px AFAIK的，你不能像那样检测它的宽度。

对于vw值，您甚至可以将calc()与min和max值一起使用：

font-size: calc( [minFS]px + ([maxFS] - [minFS]) * (100vw + [minSS]px)/([maxSS-minSS]);

minFS -最小字体大小

maxFS -最大字体大小

minSS -最小屏幕大小

maxSS -最大屏幕大小

例如，从800px开始，400px的最小字体大小为16px，最大为24px：

font-size: calc( 16px - ( 24 - 16 ) * ( 100vw - 400px ) / ( 800 - 400 );

https://www.smashingmagazine.com/2016/05/fluid-typography/