如何在css中根据其父文本缩放文本

Question

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

我如何才能做到这一点？最好只有css。

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

Answer 1

如果不依赖于Javascript，你就不能正确地做到这一点。

如果你想使用CSS-only的解决方案，它是否可行取决于div是如何调整大小的-如果它是基于视窗的，那么你可以通过CSS media查询来实现(尽管非常繁琐，工作密集，很难维护)，如果是用其他的方式，你可能不得不求助于JS来解决任何问题。

div { width: 50%；font-size: 72px；}

@纯媒体屏幕和(max-width: 1023px) { div { font-size: 36px；}}

@纯媒体屏幕和(max-width: 767px) { div { font-size: 20px；}}

诸若此类。显然，这充其量是一个近似/不完美的解决方案，也就是假设您的div相对于窗口的大小(这使得@media查询相关)。否则，您可能不得不使用JavaScript。

我最近偶然发现了，这是一个JS插件，它完全可以做你想要的事情。另一个选择是。两者都需要jQuery。

Answer 2

对于一个只有CSS的解决方案，至少根据this question的说法，看起来你可以使用大众单元来做到这一点，就像这样：

div {
    font-size: 1.5vw;
}

然而，我链接到(和this article)的问题表明，它在某些浏览器中不能完美地工作。

Answer 3

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