将PX的宽度转换为％但保持文本内容的比例为

Question

我有一个＆＃39;设计工具＆＃39;用户可以调整css属性来创建如下内容：

然后在DB中保存CSS属性。

白色div的宽度为300px。我知道要做的是在我的主页上循环浏览这些数据库行并完全显示它们的首次设计方式。问题是，为了保持我的网站的响应能力，并且在将来添加更多白色div尺寸时，通常会使事情变得更容易......

让它们显示为25％（或小屏幕下50％/ 100％）但我希望文本在比例上保持不变。所以自动换行是相同的，行高等等。所有值都存储在em中，但是百分比会导致单词错误地换行（如你所能想象的那样）。

这是25％的例子：

我可以做任何聪明的数学等来调整字体大小/行高，以保持相同，无论我制作容器的宽度是多少？

作为参考，项目循环显示并显示如下：

<a href="/design/create?canvas-size={{ $order->canvas_size }}&design-text={{ $order->design_text }}&font-size={{ $order->font_size }}&line-height={{ $order->line_height }}&add-border={{ $order->border }}">
<div class="design-canvas order-item" id="canvas-size-{{ $order->canvas_size }}">

    <div class="designText"
         style="font-size: {{ $order->font_size }}em; line-height: {{ $order->line_height }}em; border: {{ $order->border }}">
        {{ $order->design_text }}
    </div>

  </div>
</a>

Answer 1

使用当前的CSS规范制作缩放文本是不可能的，但您可以使用JavaScript。您是否尝试过查看名为FitText.js的库？它为您完成缩放工作。 （试一试，然后调整窗口大小，根据宽度上下观察字体比例）。

添加库后，您必须使用一点JQuery。例如：

$(".designText").fitText(1.2);

如果您希望字体更小，可以将fitText()值增加到1以上，或者如果您想要更大，则可以将其减小到1以下。