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彩色div中，其中一半是插入空白区域。我希望这很清楚，谢谢！

Answer 1

尝试使用这样的更改：

1）添加“font-size：65px;”到班级“.header” 2）用“font-size：1em;”替换“.headertext”和“.headermenu”类中font-size的定义。

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

Answer 2

以像素为单位定义字体大小使它们成为明确的大小，而不是使用流畅的布局可以很好地扩展的东西。用em定义字体而不是像素。要找到合适的em大小，请将字体大小除以16，这是浏览器的标准字体大小。例如，65像素的字体大小将变为4.0625em（65/16 = 4.0625）。

Answer 3

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

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

参见示例：http://jsfiddle.net/Ww4hB/

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

修改

还有一些名为viewport unit的内容，但并非所有浏览器都支持。

查看更多：http://css-tricks.com/viewport-sized-typography/

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

3 个答案: