調整窗口大小時擴大的字號

如何在HTML中製作字體，以便在展開窗口時文本的大小也會擴大。。有點像設置文本的百分比，將採取它在盒子的大小的百分比調整窗口大小時擴大的字號

這裏是我想發生什麼一個例證：

#box #text { 
    font-size: 50%; 
}

現在，讓我們說#box是200px，#text應該是100px。顯然，我不能只是把修復寬度爲#text，因爲在網站#box將是一個動態寬度。

2011-06-01 Chaim

由於ID是唯一的，因此無需在#box聲明中放置#box以外的#text。只要寫#text，因爲沒有其他元素應該得到這個ID – ecchymose 2011-06-01 20:15:24

好吧，我明白了。我只是這樣做，以說明'＃文字'在'＃盒子'裏面＃ – Chaim 2011-06-01 20:18:33

@ecchymose：而且，如果我爲許多html頁面使用一個css文件會怎麼樣？ – Chaim 2011-06-02 16:03:57

在jQuery中做到這一點。

$(window).resize(function(){ 
    $('#box #text').css('font-size',($(window).width()*0.5)+'px'); 
});

2011-06-01 20:15:57

謝謝，作品完美！ – Chaim 2011-06-01 20:31:35

使用vh（視口的高度），vw（視口寬度），和/或vm（視口最小值（最小尺寸的））中的瀏覽器單元完全支持CSS3和其他瀏覽器監聽resize和JavaScript，比如Razor Storm的回答。

2011-06-01 20:26:26

我不知道這個vh vw vm的東西。你能提供一個例子嗎？它看起來很酷！ :) – 2011-06-01 20:29:19

'100vw'是視口的寬度; '200vw'是視口寬度的兩倍。其餘的應該是不言自明的。你可能想使用'vm'單元，因爲它使用了兩個維度中較小的一個。 – 2011-06-01 20:34:28

太棒了！ css3是否有更多這些動態常量？ – 2011-06-01 20:44:28

在支持它的瀏覽器中，您可以使用CSS media queries根據窗口的寬度更改佈局。

2011-06-01 20:45:55 Neil

好主意，但是這不會允許我根據窗口大小動態控制字體的大小。 – Chaim 2011-06-02 15:55:00

@Chaim Chaikin你可以使用媒體查詢塊內的任何CSS，所以你可以改變背景顏色或列表樣式圖像，如果你想要... – Neil 2011-06-02 21:05:52

是的，我明白，但'font-size'的值可以不會與查看窗口的大小（或'＃box'我的情況）動態相關。這對我來說是特別必要的，因爲用戶可以調整窗口的大小，不過他/她想要的是，我希望'＃text'的'font-size'可以被精確地調整。 – Chaim 2011-06-03 13:37:02

回答