0

ブラウザのサイズに関係なく、サイトの上部を埋めたいWebサイトのヘッダーがあります。

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は本体にあります。これをブラウザで拡大および縮小するために何を入力すればよいかわかりません。

4

2 に答える 2

0

float:leftとを削除するだけでwidth:95%、デフォルトであるため、ブラウザの全幅が自動的に使用されます。

ただし、実際にブラウザのサイズに応じてテキストサイズ自体を大きくしたり小さくしたりする場合は、ビューポート単位を使用してみてください。

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

ビューポートユニットをサポートしていないブラウザがフォールバックできるように、最初のユニットを、、、またはその他の共通ユニットに配置するptことpxが非常に重要です。emビューポートユニットは、必要に応じて調整してください。vh代わりにを使用vwして、幅ではなくビューポートの高さに基づいてテキストサイズを調整することもできます。

これがあなたの意味でもない場合は、より具体的にしてください。

于 2013-03-03T01:02:53.170 に答える
0

ヘッダーにマージンを設定しbodyて削除する必要がありますfloatmargin

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

http://jsfiddle.net/8dtqs/を参照してください

于 2013-03-03T01:03:36.553 に答える