【问题标题】:dynamically change table size based on browser window根据浏览器窗口动态更改表格大小
【发布时间】:2012-08-12 03:30:07
【问题描述】:

我在 photoshop 中创建了一个网页 (1440px x 900px) 并将其导出到 expression 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/

【问题讨论】:

  • 表格中的图像...这真的是表格数据应该在表格中吗?
  • 我认为你真的应该重新设计 HTML 以使其具有响应性,而不是使用 jQuery。但是,请查看 jQuery 中的 .resize() 事件以开始使用。
  • @theZ - 这就是 Photoshop 为我导出它的方式。
  • @adeneo - 如何在 CSS 中将百分比用于导出的 Photoshop 网页和表格?
  • 我怎么知道,我以前从未从 Photoshop 中“导出”过网站。对我来说,这听起来像是一个非常有缺陷的想法!

标签: jquery google-chrome css photoshop kiosk


【解决方案1】:

首先你需要创建一个css样式表。并通过分类器/ ID 将样式分配给 div。

你可以在你的 CSS 代码上设置百分比来匹配屏幕。

要为不同的纵横比制作流畅的显示,您需要使用@media 屏幕定义每个分辨率

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

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

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

【讨论】:

    猜你喜欢
    • 2011-07-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-31
    • 2023-04-06
    • 2013-08-25
    • 2020-01-14
    • 2015-10-13
    相关资源
    最近更新 更多