1

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

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

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

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

4

2 回答 2

1

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

我强烈建议您更改您的设计。

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

于 2012-11-23T00:57:29.113 回答
0

一种可能的解决方案可能是仅针对 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);

意见？可能的改进？

于 2012-11-23T00:57:17.340 回答