2013-01-14 67 views
0

有沒有辦法設置font-size動態變化在瀏覽器上調整大小爲css在瀏覽器中增加字號調整大小

我有設置了媒體查詢的斷點。在第一個斷點處,字體大小是,比如說1em。在另一個斷點處,文本放大到2em

字體大小隻發生在斷點上。我尋找熱塑成型的效果,當你設置一個cointainer寬度的百分比你實現(當調整瀏覽器,它會自動調整大小。)

有沒有一種方法,使文本從一個斷點擴大到其他動態使用javascript?

+0

你的意思是,案文應在兩種狀態之間動畫? – David

+0

@大衛是的。它應該從1em增加到2em在beetweetn的斷點。不是突然。有點混亂,不知道如何很好地解釋需求 – jviotti

+0

我做了一些編輯並添加了另一個mediaqueries示例,這是我在純CSS中可以做的最好的... – David

回答

0

如果要根據窗口大小更改字體大小onresize,則需要將JavaScript處理程序綁定到窗口大小調整事件。如果你只是想在兩種狀態之間的動畫,你可以使用CSS3動畫,f.ex:

-webkit-transition:font-size 1s ease-out; 

http://jsbin.com/uyitut/1

此示例使用觸發按鈕只是爲了演示的過渡,但你可以添加多個媒體查詢。這是一個相當尷尬的例子,每100像素一個mq:http://jsbin.com/uyitut/5但它有點不錯。

+0

始終包含所有供應商前綴,包括非供應商前綴 – VenomVendor

+0

您如何知道OP不僅僅針對webkit? – David

+0

我使用FF和其他人可能也是如此,SO是所有人,順便說一句,上述不會工作,同時訪問響應式佈局。從一個媒體查詢轉移到另一個時,轉換不會發生。問題是如何在調整瀏覽器大小時顯示過渡效果。 – VenomVendor

相關問題