根据浏览器窗口动态更改表大小

时间:2012-08-15 19:39:09

标签: jquery google-chrome css3 photoshop kiosk

我在photoshop中创建了一个网页(1440px x 900px)并将其导出到表达式web 4.我选择了表格和图像“自动创建”。我也可以选择“自动创建”CSS。这是一个信息亭网页,将放在各种屏幕尺寸。 (使用Chrome.exe --kiosk)因为每次部署新的自助服务终端时我都不想编辑photoshop页面,所以我想弄清楚如何让表格自动更改其大小及其内部的所有图像匹配浏览器窗口的大小。该表旨在从上到下,从左到右,0(零)一切......见下文。

leftmargin =“0”topmargin =“0”marginwidth =“0”marginheight =“0”

关于如何创建一个能够填满整个屏幕的网页的任何想法,无论显示器的分辨率是多少,并使表格内的所有图像都相应地重新调整大小并且不会完全失控?

以下是jsfiddle http://jsfiddle.net/3eYb8/

的链接

这是photoshops CSS输出http://jsfiddle.net/BbXgd/1/

1 个答案:

答案 0 :(得分:0)

首先,您需要创建一个css样式表。并通过classer / ID将样式设置为div。

你的css代码可以有百分比来匹配屏幕。

要针对不同的视觉比率进行流体显示,您需要使用@media屏幕定义每个分辨率

这里有关于流体屏幕的更多信息。

http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

http://green-beast.com/blog/?p=199