根据div调整大小调整文本大小？答案

【问题标题】：Resize text based on div resizing?根据div调整大小调整文本大小？
【发布时间】：2014-01-25 19:36:30
【问题描述】：

首先，这是我的代码：

.header{
  width: 100%;
  height: 10%;
  background-color: #FF4545;

}
.headertext{
    font-family: 'Duru Sans', sans-serif;
    font-size: 65px;
    float:left;
    margin-top: 0px;
    margin-bottom: 0px;
}

.headermenu{
    font-family: 'Duru Sans', sans-serif;
    font-size: 65px;
    float: right;
    margin-top: 0px;
    margin-bottom: 0px;

}

因此 .headertext 和 .headermenu 都是嵌入在 .header div 中的 html p 语句。现在，.header div 具有 bg 颜色。当我调整窗口大小时，div 会调整大小（非常清楚地使用 bg 颜色）但是文本不会调整大小。考虑到我为它们分配了具体的字体大小，文本不会调整大小是有道理的。我想问一下如何让字体大小动态缩放以使文本始终保留在 div 中？此时，当您调整大小时，它会突出底部，这意味着一半的文本在 bg 彩色 div 内，而另一半则突出到空白处。我希望这足够清楚，谢谢！

【问题讨论】：

标签： html css fonts resize

【解决方案1】：

尝试像这样使用改变它：

1) 添加“字体大小：65px;”到类“.header” 2) 将“.headertext”和“.headermenu”类中font-size的定义替换为“font-size: 1em;”

因此，子节点将获得与父节点相同的大小。因此，当父节点调整大小时，子节点也将调整大小。

【讨论】：

【解决方案2】：

以像素为单位定义字体大小会使它们具有明确的大小，而不是可以通过流畅的布局很好地缩放。用 em 而不是像素定义字体。要找到合适的 em 大小，您需要将字体大小除以 16，这是浏览器的标准字体大小。例如，您的 65 像素字体大小将变为 4.0625em (65 / 16 = 4.0625)。

【讨论】：

【解决方案3】：

我认为没有 CSS 方法可以使 font-size 在窗口调整大小时平滑缩放。

您也可以尝试 CSS 媒体查询设置 font-size 相对于特定宽度/高度

查看示例：http://jsfiddle.net/Ww4hB/

否则，您需要 JavaScript 在页面加载和窗口调整大小时更新字体大小。

编辑：

还有一个叫做viewport unit的东西，但并不是所有浏览器都支持它。

【讨论】：