根据DIV调整大小调整文本大小

Question

要开始事情，这是我的代码：

.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都是嵌入在.headerdiv中的html p语句。现在，.headerdiv具有BG颜色。当我调整窗口大小时，div尺寸（以BG颜色很明显），但是文本没有调整大小。鉴于我为它们分配了具体的字体大小，因此文本没有调整大小是有道理的。我想问一下如何使字体大小动态扩展，以使文本始终保存在DIV中？在这一点上，当您调整大小时，它会戳出底部，这意味着一半的文本在BG彩色div内，其中一半伸入空格。我希望这足够清楚，谢谢！

Answer 1

尝试使用以下更改：

1）添加"字体大小：65px;"上课" .header"2）替换" .headertext"one_answers" .headermenu"类中字体大小的定义，由"字体大小：1EM;"

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

Answer 2

在像素中定义字体大小使它们确定的大小，而不是通过流体布局很好地扩展的东西。在EM而不是像素中定义字体。要找到合适的EM大小，您将字体大小除以16，这是浏览器的标准字体尺寸。例如，您的字体大小为65像素将变为4.0625EM（65/16 = 4.0625）。

Answer 3

我认为没有CSS使font-size在窗口大小上平稳缩放。

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

请参阅示例：http：//jsfiddle.net/ww4hb/

否则，您需要JavaScript才能更新页面加载和窗口大小的字体大小。

编辑：

也有一些称为viewport unit的东西，但在所有浏览器中都不支持。

请参阅更多：http：//css-tricks.com/viewport-sied-typography/