html - 根据屏幕大小更改网页

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