使用表格或無表格形式的響應式HTML頁面設計（PC，平板電腦，智能手機）

Question

我正在開發基於PC的網絡應用程序，但在不久的將來我們會設想支持平板電腦和智能手機。我們使用Twitter Bootstrap（http://twitter.github.com/bootstrap/index.html）和JQuery作爲CSS/Javascript核心。

對於以前的大部分開發，我們使用表格來佈置我們的表格，因爲大部分應用程序都是針對桌面使用的，因此使用表格恰好可以佈置表格（大多數是兩列）以確保對齊和等等。

但是現在我們正在考慮添加屏幕空間有限的移動設備，並且考慮到並非所有表格都可以通過智能手機訪問，我開始懷疑我們是否應該保留表格並創建移動設備的無表格形式。我相信Twitter Bootstrap將爲我們提供所需的表格支持，但我仍然想知道這是2012年的一個主要問題嗎？

作爲一個新的應用程序，我們也可以選擇強制用戶使用最新的瀏覽器版本來訪問應用程序，但這對移動首次設計有什麼意義？

我知道多年來一直在討論這個問題，但我正在尋找2012年看待這個問題的工具。

Answer 1

您可以創建自己的定製框架（可以這麼說），這將基於響應或流體設計。它將是基於div的（或無表）結構，沒有任何固定的px值。 （即所有的填充/邊距/字體/寬度等在em /％） CSS會比正常的基於固定px的CSS稍微複雜..

我已經使用響應式設計創建了一個新頁面，它在所有現代桌面瀏覽器以及移動/平板電腦上運行得非常好。

Answer 2

在我看來，Twitter Bootstrap非常適合寫無表格形式。該代碼有點臃腫的形式，但它在不同的屏幕分辨率上很好地重新調整大小。

Answer 3

使用bootstrap！

它具有自適應設計，這意味着它可以在各種屏幕尺寸下正常工作。

Here you got the official docs for forms.

你可以試試，看看它是如何將剛剛調整屏幕寬度的小屏幕設備上可以看出，使它更窄。調整屏幕大小時，您會看到所有組件重新啓動。