根据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是嵌入在.header DIV中的HTML语句p。现在，.header div具有bg颜色。当我调整窗口大小时，div会调整大小（非常清晰地显示bg颜色），但文本不会调整大小。它是有道理的，因为我已经为它们分配了具体的字体大小，所以文本不会调整大小。我想问我如何动态缩放字体大小，以便文本始终保持在div内？此时，它在调整大小时触发底部，意味着一半文本位于bg彩色格内，另一半则突出显示为空格。我希望这很清楚，谢谢！

Answer 1

尝试使用改变这样的：

1）添加 “FONT-SIZE：65px;” 2）用“font-size：1em;”替换类“.headertext”和“.headermenu”中字体大小的定义。

因此，孩子会得到相同大小的父节点。因此，当父级调整大小时，子级节点也将调整大小。

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-sized-typography/