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

【问题标题】：How can text be scaled according to its parent in css如何根据css中的父级缩放文本
【发布时间】：2014-03-20 12:29:30
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

div {
    font-size: 1.5vw;
}

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

【讨论】：

【解决方案3】：

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

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

div { 宽度：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。

【讨论】：