2011-08-30 72 views
2

當我建立我的第一個所有html/css網站時,我使用可點擊圖像作爲菜單,並且每個圖像和div都以%縮放,因此它可以很好地適應所有顯示器和瀏覽器,它做了。使用html和css的字體大小問題

現在在一個新項目上,我想使用整個頁面的背景圖像(使用菜單按鈕但沒有文本)來完成網站菜單,然後在圖像頂部使用超鏈接文本,所以它看起來像一個適當的菜單。

所以我雖然,如果我只是把%的字體大小,它可能會完美的規模完美的瀏覽器窗口的顯示部分的大小增加或減少,它與其他一切工作如此完美,所以爲什麼不應該'它現在的工作...

我做了它,它不工作,我不知道在地獄裏的東西得到它的百分比,如果我在一個div中設置100%字體大小2%或3%的頁面大小取決於文本的分辨率會過大或過小。

我知道我可以根據瀏覽器窗口使事物可伸縮,但是如何根據事物或瀏覽器窗口本身使文本大小可伸縮?

一個反應,告訴如何做到這一點只使用CSS和HTML這對我來說更好,我知道一些腳本,但我不喜歡混合顯示部分和腳本部分,所以如果你有人知道如何使這隻使用HTML/CSS我將繼續使用可點擊的圖像和百分比或像素爲整個事情。

謝謝。

+1

在使用純CSS的瀏覽器中,無法使字體大小相對於窗口/容器大小。它只是不受支持。不過,您可以使用JavaScript爲您進行計算,並設置全局基本字體大小,從中設置相對大小。 –

回答

1

這個問題的另一個解決方案是使用液體/響應的CSS框架,然後用媒體查詢調整字體大小取決於瀏覽器的寬度,以確保它着眼於以往任何時候都可能寬度大。

的幾個例子將是:

1140網格(http://cssgrid.net/)

骨架(http://www.getskeleton.com/)

或一個I '目前正在工作(https://github.com/gogogarrett/Muscle)

希望這會有所幫助。

+0

我會研究它,謝謝 – wxiiir

2

font-size不能這樣工作。

font-size是相對於其父元素的字體大小的大小。

在CSS中,您無法根據窗口寬度調整字體大小。但是,這可以計算出in Javascript

+0

字體大小不完全相對於父元素,如果它是,我的問題將被解決。如果你做了一些測試,你會發現。 – wxiiir

+0

@wxiir我想你誤解了我說的話。它不是相對於父元素的大小,而是相對於父元素的**字體大小**。 –

+0

這是對的我真的沒有詳細說明你說的,我很抱歉。但無論如何,如果我現在不瞭解它仍然是錯誤的。如果文本或父元素具有絕對字體大小而另一個具有相對字體大小,則絕對將佔上風,如果兩者都具有絕對字體大小,則父元素字體大小將佔上風,並且如果兩者都具有相對字體大小可能是由瀏覽器或一些廢話確定的默認字體大小,所以字體將調整大小取決於瀏覽器 – wxiiir