2013-03-03 129 views
0

我在網站中有一個標頭,無論瀏覽器大小如何,我都想填充該網站的頂部。使用瀏覽器擴展標頭

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就在正文中。我不知道該輸入什麼才能使瀏覽器擴展和縮小。

回答

0

那麼,如果你只是刪除float:leftwidth:95%,那麼它會自動採用瀏覽器的全部寬度,因爲這是默認設置。

但是,如果你實際上是在談論使文字大小本身變得更大和更小的根據瀏覽器的大小,你可以嘗試使用視口單位:

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

它是有頭很重要一個在pt,pxem或其他常見單位,以便不支持視口單元的瀏覽器有一些東西可以回退。至於視口單元,請根據需要進行調整。您還可以使用vh而不是vw根據視口的高度而不是寬度來調整文本大小。

如果這不是你的意思,請更具體。

+0

謝謝你,我想的文本本身,以增加或字體大小減小刪除floatmargin,但視口單位似乎沒有工作。 – user2127852 2013-03-03 02:23:45

+0

僅在[非常有限的一組瀏覽器](http://caniuse.com/#feat=viewport-units)中支持視口單元,因爲它在規格中如此新穎。 – 2013-03-03 02:30:23

+0

我正在使用谷歌瀏覽器。這是最新版本,我檢查了兼容性。我不明白我在做什麼錯誤 – user2127852 2013-03-03 02:44:57

0

您應該設置你的利潤率body和頭部

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

看到http://jsfiddle.net/8dtqs/