如何在调整大小窗口小部件上动态调整窗口小部件文本

Question

我正在使用gridstack处理小部件。我想使小部件与图像中显示的相同。我面临的问题是，当我调整窗口小部件时，文本不灵活。

我希望文本使用小部件大小更改大小。我几天就坚持下去，不知道该怎么做。我做了媒体查询，但没有用。

更多我正在使用angularjs和bootstrap。

以下是动态制作网格的代码：

<div class="container-fixed-lg" style="margin-left:10px; margin-top:75px">

<div gridstack class="grid-stack grid1" id="12345" options="options">
   <div gridstack-item ng-repeat="value in currentTab.widgets" id="{{value.widgetId}}" class="grid-stack-item" gs-item-x="value.xAxis" gs-item-y="value.yAxis" gs-item-width="value.width" gs-item-height="value.height">
      <div class="grid-stack-item-content ui-draggable-handle panel panel-default" id="{{value.widgetId}}" style="height:tempHeight; margin: 5px 5px 5px 5px;">
         <div dynamic="value.widgetDirective"></div>
      </div>
   </div>
</div>