Jquery 在css中，文本如何根据其父级进行缩放

如何使文本字体大小与div成比例，使文本大小/divsize的比例保持不变？ 换句话说，当我调整div的大小时，我需要文本与之一起调整大小，就像它只是一个图像缩放一样

我怎样才能做到这一点？最好只使用css

---

这可能是一个webkit唯一的解决方案。我不需要它与其余部分兼容。

如果不依赖Javascript，就无法正确完成这项工作

如果您想使用仅CSS的解决方案，它是否接近可能取决于

div

的大小调整方式-如果它基于viewport，那么您可以通过CSS媒体查询实现这一点（尽管这是一种非常粗糙、工作密集、难以维护的方式），如下所示，如果是以其他方式完成的，您可能必须求助于JS来获得任何解决方案

div{ 宽度：50%； 字体大小：72px； }

@仅介质屏幕和（最大宽度：1023px）{ div{ 字体大小：36px； } }

@仅介质屏幕和（最大宽度：767px）{ div{ 字体大小：20px； } }

等等。显然，这充其量只是一个近似/不完美的解决方案，假设您的

div

的大小相对于窗口（这使得

@media

查询相关）。否则，您可能必须使用JavaScript

我最近偶然发现了一个JS插件，它能完全满足您的要求。另一个选择是。两者都需要jQuery。

如中所述，可能是一个很好的例子

对于仅CSS的解决方案，至少根据，您可以使用vw单元来实现这一点，如下所示：

div {
    font-size: 1.5vw;
}

---

但是，我链接到的问题（并且）说它在某些浏览器中不能完美地工作。

那么为什么不使用

transform:scale

转换元素呢

-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);