javascript - 根据元素高度和宽度的百分比变化来增加或减小字体大小

Question

我想在调整元素大小时调整元素内文本的字体大小。我设法让它根据这个 jsFiddle 中的宽度很好地调整字体大小:

http://jsfiddle.net/jWKWS/3/

但是，我只能根据一个维度调整它的大小。我可以使用高度百分比，也可以使用宽度百分比。是否可以使用一个方程式同时考虑两个维度，以便根据高度和宽度适当调整大小？

Answer 1

如何基于区域？添加:

percentageAreaDifference = (1-percentageWidthDifference)*(1-percentageHeightDifference)

然后

newFontSize = startingFontSize * percentageAreaDifference;

虽然你可能想玩它；我怀疑这会使字体缩小/增大的速度比需要的快一点。你可能想这样做:

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

由于更改字体大小实际上会沿两个维度缩小它，因此字体大小减小 50% 会使字符占据的区域减少 75%(大致)。