根據屏幕大小更改網頁

Question

我正在設計一個網站，我希望我的網站能夠打開所有尺寸的屏幕，如桌面各種尺寸，iphone，ipad等。我正在safari瀏覽器上測試它。如果我改變瀏覽器大小，那麼內部的數據和圖像需要根據該大小進行調整。爲了達到這個目的，我使用了Liquid Layout。但我無法設置百分比的段落。我也試過'他們'。所以，我做了25px。所以，當我改變我的瀏覽器大小時，這裏是問題，網頁內的圖像根據越來越小的尺寸而變化，但字體大小不變。 如何做到這一點？

謝謝您提前。

Answer 1

在你的CSS中，試試p { word-wrap: break-word; width: 100%; }。

魔法是word-wrap: break-word;這樣做是通過高度填充容器，但保持其寬度。

此外，使用此功能，您不必將font-size設置爲%，但可以使用px。

http://jsfiddle.net/kQEM8/1/

編輯：既然你修訂你的問題，你的意思是這樣？嘗試在jsfiddle中運行它，然後調整瀏覽器的大小。

http://jsfiddle.net/kQEM8/2/

window.onresize = function(event) { 
    document.getElementById('test').style.fontSize = (document.width * 0.1)+'px' 
}