保持CSS属性（字体大小，行高，边框等）的比例

Question

寻找一些数学帮助。

我在数据库中设计了T恤图形。这些是helvetica中的简单引号，用户可以在保存之前选择字体大小和行高。

我正在尝试在网格中的主页上显示它们，但是比率存在问题。

它们使用css属性值保存在数据库中，然后我循环遍历它们并在线定义它们的样式：

<div class="design-canvas" id="canvas-size-{{ $order->canvas_size }}" style="height: auto; float: left;">

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

</div>

这很好用，但画布大小的ID代表一个具有固定宽度的选择器。 300px或600px，取决于用户选择的内容。

如何显示这些内容并改为给予它们，例如25％的容器宽度，但是然后计算出字体大小等应该是什么样才能让它们看起来像设计一样？

E.g：

设计1：300px，28px字体大小，24px线高。

当它在大屏幕上显示30％时，我希望自动换行和行高等看起来与平板电脑/手机等完全相同。

在手机上我想以100％的宽度显示它们，但保持它们看起来一样。