根据容器大小调整字体大小答案

【问题标题】：adjust font-size based on container size根据容器大小调整字体大小
【发布时间】：2012-11-11 09:29:45
【问题描述】：

我正在调整一个 wordpress 主题，如果整个页面的文本根据每个容器 div 的宽度进行缩放会很好。

到目前为止，所有宽度都以 % 为单位，但正如 w3c 所述，font-size 属性仅考虑了父级的字体大小，而不考虑容器 div 的大小。

正如多个其他答案所暗示的那样，我可以使用 javascript 来做到这一点并针对每个容器 div，尽管从我的角度来看这是一个非常有用的答案，但不适用于我的问题，因为我不知道所有可能的容器 id 或类，因为我必须考虑未来可能输出文本的插件安装，例如

那么有没有其他方法可以做到这一点？

【问题讨论】：

标签： wordpress dynamic wordpress-theming font-size

【解决方案1】：

没有 Javascript。 CSS 基于font-size 基于行高的百分比，没有基于宽度的控件。

我强烈建议您更改设计。

如果您想尝试使用它，我不确定您对 Javascript 的熟练程度，但您可以遍历 DOM 节点，寻找共同条件，找到 DIV 的宽度，然后继续方式。

【讨论】：

【解决方案2】：

一种可能的解决方案是仅针对 body 元素并更改其字体大小，这样每个字体大小都应因父元素的变化而适应。

这个解决方案结合媒体查询来定位最常见的屏幕尺寸应该是完美的。

基于此，我拼凑了以下（http://jsfiddle.net/8TrTU/73/）

function adaptFontSize() {
var defaultW = 100;
var defaultFontSize = 16;
var  width = parseInt($("#header").width());
var fontSize = (defaultFontSize * width)/defaultW+"px";

$("#page").css('font-size', fontSize);

// alert(width +" "+ defaultFontSize * width+ " " fontSize);
}
$(document).ready(adaptFontSize);
$(window).resize(adaptFontSize);

意见？可能的改进？

【讨论】：