具有表格或无表格的响应式HTML页面设计(PC,平板电脑,智能手机)

时间:2012-04-09 12:12:20

标签: css html5 twitter-bootstrap responsive-design

我正在开发一个基于PC的网络应用程序,但在不久的将来,我们会设想支持平板电脑和智能手机。我们使用Twitter Bootstrap(http://twitter.github.com/bootstrap/index.html)和JQuery作为CSS / Javascript核心。

对于以前的大多数开发,我们使用表来布局表单,因为大多数应用程序都是针对桌面使用的,因此使用表格恰好在布局表单(大多数是两列)以确保对齐等等上。

然而,现在我们正在考虑添加具有有限屏幕空间的移动设备,并且考虑到并非所有表格都可以访问智能手机,我开始想知道我们是否应该保留表格并创建表格 - 移动设备的无形表格。我确信Twitter Bootstrap将为我们提供桌面较少形式所需的支持,但我仍然怀疑它是否是2012年的一个主要问题?

作为一个新的应用程序,我们还可以选择强制用户使用最新的浏览器版本来访问应用程序,但这对于移动优先设计有何意义?

我知道多年来已经讨论过这个问题,但我正在寻找2012年使用可用工具查看这个问题。

3 个答案:

答案 0 :(得分:2)

在我看来,Twitter Bootstrap非常适合编写无桌面表格。代码对于表单有点臃肿,但它在不同的屏幕分辨率上重新调整大小。

答案 1 :(得分:1)

使用bootstrap!

它具有响应式设计,这意味着它适用于各种屏幕尺寸。

Here you got the official docs for forms.

您可以尝试查看如何在小屏幕设备上看到它只是调整屏幕宽度,使其更窄。您将在调整大小时看到所有组件重新调整到屏幕。

答案 2 :(得分:0)

您可以创建自己的自定义框架(可以这么说),它基于响应式或流畅的设计。它将是基于div(或无表格)的结构,没有任何固定的px值。 (即em /%中的所有填充/边距/字体/宽度等) 与普通的基于固定px的CSS相比,CSS会稍微复杂一些。

我使用响应式设计创建了一个新页面,它在所有现代桌面浏览器以及移动设备/平板电脑上都运行良好。