如何使小部件文本响应小部件调整大小

Question

我正在使用gridstack处理小部件。我面临的问题是当我调整窗口小部件的大小时，文本不灵活。

我希望文本通过窗口小部件调整大小来改变它的大小。我几天就坚持不上，不知道该怎么做。我做了媒体查询，但它没有工作。

更多关于我使用angularjs和bootstrap。

<div id="widget" class="img-background" onclick="$('#filePhoto').click()" style="width: 100%; height: 100%;">
<h1 style="font-size: 4em; color: #DCDCDC;left:2em; text-align: center;">Drag Image</h1>
</div>

我希望当我调整小部件的大小时，然后拖动图像文本应该放大小部件放大。

Answer 1

您可以在css中使用vw单位font-size来获取此

小提琴：https://jsfiddle.net/sanchitpatiyal95/s0po1c80/

h1{
  font-size: 20vw;
}