jquery - 如何根据CSS中的父级缩放文本

Question

我怎样才能使一些文本字体大小缩放到 div 中，这样文本大小/divsize 的比例保持不变？ 换句话说，当我调整 div 大小时，我需要调整文本大小，就像它只是图像缩放一样。

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

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

Answer 1

如果不依赖 Javascript，您将无法正确执行此操作。

如果您想使用纯 CSS 解决方案，它是否接近可能取决于 div 的大小调整方式 - 如果它基于视口(viewport)，那么您可以实现这一点(尽管在非常 hacky 和工作密集型，难以保持时尚)使用如下所示的 CSS 媒体查询，如果以其他方式完成，您可能不得不求助于 JS 来寻求任何解决方案。

分区{ 宽度:50%； 字体大小:72px；

@media only screen and (max-width: 1023px) { 分区{ 字体大小:36px； }

@media only screen and (max-width: 767px) { 分区{ 字体大小:20px； }

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

我最近偶然发现了 FitText这是一个 JS 插件，可以完全满足您的要求。另一个选项是 BigText .两者都需要 jQuery。