表以快速響應的網頁設計

我已經按照典型的方式形式已經在應用程序中，這是使用一個表，看起來像這樣設置：表以快速響應的網頁設計

<table> 
    <tbody> 
    <tr> 
     <td>Field</td> 
     <td>@Html.TextBox("Field")</td> 
    </tr> 
    <tr> 
     <td>Field 2</td> 
     <td>@Html.TextBox("Field2")</td> 
    </tr> 
    </tbody> 
</table>

其產生的格式，如：

Field <TextBox> 
Field <TextBox>

大多數移動設計攤開來是這樣的：

Field 
<TextBox> 
Field 
<TextBox>

這是我需要做的，因爲我的一些表單太長而無法在移動瀏覽器中顯示。有沒有簡單的方法來設置？也許有辦法讓每個單元格渲染一個新行，這對我有用嗎？跨瀏覽器支持的東西？

還是需要重新設計？

謝謝。

來源

2012-03-17 Brian Mains

是啊，你可以做這樣的事情下降較小視表顯示：

@media (max-width:40em) { 
    table, thead, tbody, tfoot, th, td, tr { display:block; } 
    tr + tr { margin-top:1em; } 
}

參見：css-tricks.com/responsive-data-tables/

來源

2012-03-21 15:07:23 ryanve

在移動設備中 - TD {顯示：塊}如果你想讓你的網站移動友好的也有幾件事情，以避免

來源

2012-03-17 03:26:42

。你不能使用表格，因爲它們是用固定的寬度製作的，所以它不能在較小的移動設備中正確顯示。也可以在css中使用相對位置。如果你想使不同的佈局使用@media查詢。或者使用jquerymobile來設計交互式設計。

來源

2012-03-17 03:49:38

我通常做一個列表標記（哪種類型取決於需求）或一系列的div。基本上每個字段都有一個包含元素。舉個簡單的例子，我會在這裏使用一個div但那通常是不得已而爲之的包含元素對我來說：

<div class="input-text form-field"> 
    <label for="the_element">Text Input</label> 
    <input id="the_element" type="text" /> 
</div>

這真的是最好的，因爲當標記是至少有點更多的語義，它給了我們一個噸的可能性。

堆疊標籤：

.form-field label { display: block; }

固定寬度的標籤：

.form-field {overflow: hidden; width: 200px;} 
.form-field label {width: 40%; margin-left: 10%;} 
.form-field label, .form-field input, .form-field select, .form-field textarea {float: left; width: 50%;}

這標誌了還讓你2了場很容易

標記：

<fieldset> 
    <legend>Name</legend> 
    <div class="input-text form-field"> 
     <label for="first_name">First Name</label> 
     <input id="first_name" type="text" /> 
    </div> 
    <div class="input-text form-field"> 
     <label for="last_name">Last Name</label> 
     <input id="last_name" type="text" /> 
    </div> 
</fieldset>

CSS

fieldset {overflow: hidden;} 
.form-field {overflow: hidden; width: 200px; float:left; margin-left: 20px;} 
.form-field label { display: block; } 
.form-field input, .form-field select .form-field textarea {display: block; width: 100%;}

您明白了。如果你這樣做，並在需要時使用實際寬度，你可以使表單完全響應。

來源

2012-03-17 04:00:49 prodigitalson

-2

繼續使用表格。這是唯一可以讓您以自適應方式顯示錶格的方法，以便標籤只佔用最長的寬度。一張桌子會自動合理呈現，您可以輕鬆對其進行微調。

它也適用於移動設備，條件是標籤很短，因爲它們應該是。移動設備顯示不是，縮小，他們不能容納像「城市」和15個字符寬的輸入框標籤。在某些情況下出現問題時，用戶可以處理這些問題，因爲他們遇到類似的問題;例如，他們可以將設備轉90度。

來源

2012-03-17 05:45:36

表以快速響應的網頁設計

回答

相關問題