如何根据css中的父级缩放文本

Question

我怎么能以这样的方式对div进行一些文本字体大小缩放比例text-size / divsize保持不变？ 换句话说，当我调整div的大小时，我需要使用它调整文本大小，就像它只是图像缩放一样。

我怎样才能做到这一点？仅限css。

这可以是仅限webkit的解决方案。我不需要它与其他人兼容。

Answer 1

如果不依赖Javascript，则无法正常执行此操作。

如果你想使用一个只有CSS的解决方案，它是否接近可能取决于如何调整div的大小 - 如果它基于视口，那么你可以实现这一点（虽然非常hacky和使用下面的CSS媒体查询，工作密集，难以维护的时尚，如果以其他方式完成，您可能不得不求助于任何解决方案。

div {     宽度：50％;     font-size：72px; }

@media only screen and（max-width：1023px）{     div {         font-size：36px;     } }

@media only screen and（max-width：767px）{     div {         font-size：20px;     } }

等等。显然，这是一个近似/不完美的解决方案，假设您的div相对于窗口大小（这使得@media查询相关）。否则你可能不得不使用JavaScript。

我最近偶然发现FitText这是一个JS插件，可以完全按照你的要求进行操作。另一种选择是BigText。两者都需要jQuery。

Answer 2

正如this question中所述，this jsfiddle可能是一个很好的例子。

对于仅支持CSS的解决方案，至少根据this question，您似乎可以使用vw单位来执行此操作，如下所示：

div {
    font-size: 1.5vw;
}

但是，我链接到的问题（和this article）表示它在某些浏览器中无法正常运行。

Answer 3

那么为什么不用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);