2014-10-03 116 views
0

我有這個JSFiddle字體大小不響應

body 
{ 
    background: rgb(111,111,111); 
} 

#Banner 
{ 
    width: 100%; /*1200px*/ 
    height: 800px; 
    background: url("http://www.firstdayfwb.com/images/header.jpg") no-repeat 55%; 
    background-size: contain; 
} 

#Mission 
{ 
    padding-top: 750px; 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 250%; 
    font-weight: bold; 
    text-align: center; 
} 


<body> 

     <div id="Menu"> 

     </div> 

     <div id="Banner"> 

      <h1 id="Mission">Creating a Church Unchurched People Love to Attend</h1> 

     </div> 






    </body> 

我試圖讓H1我的字體大小(ID任務)來響應,並改變它的大小基於它的容器的大小。我嘗試了很多東西,改變百分比是我最接近的;但是,它仍然不像我想要的那樣工作。

有關如何將字體大小修改爲基於容器大小(當瀏覽器窗口被調整大小時)調整字體大小的任何想法?

+0

這對我來說好嗎?但是,如果您需要更多:http://simplefocus.com/flowtype/,也許這? – sinisake 2014-10-03 15:54:36

+1

http://stackoverflow.com/q/15649244/2887133 – DaniP 2014-10-03 15:55:48

+4

這個答案可能有所幫助:http://stackoverflow.com/questions/15574823/font-size-relative-to-container 一個純粹的CSS解決方案可以使用多媒體查詢更改字體大小或使用vh和vw單位:http://css-tricks.com/viewport-sized-typography/ – ncardeli 2014-10-03 16:02:22

回答

1

不幸的是,不,這是CSS媒體查詢有點短的地方。您無法檢測和純粹使用CSS來更改基於容器大小的字體,只能檢測屏幕大小。您必須使用JavaScript(例如fittext)才能完成您想要的功能。