Question

我在网站上有一个标题，无论浏览器大小是什么，我都希望填充网站的顶部。

h1 {
    font-family: 'Holtwood One SC';
    color: #1C003A;
    font-size: 4em;
}
#header {   
    float:left;
    text-align:center;
    width: 95%;
    margin: 0px 20px 0px 20px;
}

<div id="header"><a href="index.html"><h1>Spilling the Beans</h1></a></div>

这是CSS和HTML。标题的div就在正文中。我不知道输入什么来使浏览器扩展和缩小。

Answer 1

好吧，如果您只删除float:left和width:95%，那么它会自动占用浏览器的整个宽度，因为这是默认设置。

但是，如果您实际上在谈论根据浏览器大小使文本大小变得越来越大，您可以尝试使用视口单元：

h1 {
    font-size:4em;
    font-size:5vw;
}

将第一个放在pt，px，em或其他常用单元中非常重要，这样不支持Viewport单元的浏览器就会出现问题回来。对于视口单元，根据需要进行调整。您还可以使用vh代替vw根据视口的高度而不是宽度调整文本大小。

如果这不是您的意思，请更具体。

Answer 2

您应该在body设置边距并删除标题上的float和margin

body{
    margin:0; padding:20px;
}
#header {   
    text-align:center;
    width: 100%;
    background:#ccc;
    margin:auto;
}

请参阅http://jsfiddle.net/8dtqs/

使用浏览器扩展标头

2 个答案: