根据屏幕大小更改网页

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' 
}