td 中的文本可以与 td 一起调整大小吗？（是其高度的百分比？）答案

【问题标题】：Can the text inside a td resize along with the td? (be a percentage of its height?)td 中的文本可以与 td 一起调整大小吗？（是其高度的百分比？）
【发布时间】：2014-03-14 22:28:00
【问题描述】：

我有一个占屏幕 100% 的表格，里面有 3x3 = 9 个单元格，每个单元格占 33%。到目前为止，一切都很好。它是一个干净、可扩展的井字游戏。

问题在于 TD 内的文本无法按比例缩放。

有没有办法说“我希望文本大小是 TD 高度的 30%”？什么的

PS：我尝试了 font-size:50%，但它不起作用。这意味着父字体大小的 50%，这是一个以像素为单位的固定值。所以它不是动态的。

【问题讨论】：

你真的不应该使用表格进行布局。这是一种非常糟糕的做法。
@Ood 无论是使用表格还是 div，问题都是一样的。 “是否可以根据容器动态调整字体大小”？
也许你应该尝试使用 em 而不是 %，2 em 表示双倍大小，0.5 em 表示 50%。
这个怎么样？ jsfiddle.net/cmAcz

标签： javascript css html text resize

【解决方案1】：

正如我已经在评论中为你提供了一个演示，但我读到你想要基于每个height 的font-size td 即30% 的td 所以你没有办法可以使用纯 CSS 做到这一点，你将不得不使用 Javascript 或 jQuery 来实现...

$('table tr td').each(function() {
    $(this).css('font-size', $(this).height()*0.3 + 'px');
});

Demo

【讨论】：

我认为你的答案与Is there some way to say "I want the text size to be 30% of the height of the TD"? 的问题相匹配——所以加我的 1。但是基于a table which is 100% of the screen，我相信如果用户有更大的屏幕，他希望有更大的文本。
@threeFourOneSixOneThree 谢谢你，如果是这样的话，宽度很重要，所以我已经在评论中提供了一个例子。如果你愿意，这里是链接:) jsfiddle.net/cmAcz跨度>

【解决方案2】：

这可以通过 JavaScript 实现。

<body onload="resizeFontSize();" onresize="resizeFontSize();">
<div style="width: 100%" id="el">Content</div>
</body>

以及功能：

function resizeFontSize(){

element = document.getElementById('el');
element.style.fontSize = (element.offsetHeight * 0.3) + 'px'; 

}

【讨论】：

代码在 Quirks 模式下工作。要使其在标准模式下也能工作，您需要在font-size 值上附加一个单位：element.style.fontSize = (element.offsetHeight * 0.3) + 'px';。而且这个例子根本不起作用，因为div 元素的内容是空的。
修复了这两个问题。