Question

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

到目前为止所有的宽度都是％，但是w3c提到font-size属性只考虑父级的字体大小而不考虑容器div的大小。

正如其他多个答案所暗示的那样，我可以用javascript来实现并定位每个容器div，虽然从我的角度来看这是一个非常有用的答案并不适用于我的问题，因为我不知道所有可能的容器id或类，因为我必须考虑将来可以输出文本的插件安装，e.t.c。

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

Answer 1

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

我强烈建议您更改设计。

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

Answer 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);

意见？可能的改进？

根据容器大小调整font-size

2 个答案: