響應式設計，以顯示數據列表

我想在桌面版本的網站上使用表格顯示數據列表中的數據。我想爲移動網絡縮小相同的內容。我應該使用單獨的HTML塊還是可以將當前表格轉換爲移動視圖。響應式設計，以顯示數據列表

http://play.mink7.com/h/startupsradar/pending.html

我喜歡移動

enter image description here

更新以下列表視圖我根據答案修改的代碼。任何想法如何我可以整個列表作爲一個整體作爲一個塊可點擊？

2012-07-29 Harsha M V

您可以將HTML table轉換爲不同的呈現方式，例如，設置

table { display: block; } 
tr { display: table; } 
th, td { display: table-row; }

這將導致完全垂直的表示。

當然細節取決於標記和所需的渲染。

來源

2012-07-29 08:02:39

哇之間的鏈接的區域。從來沒有想過這個。謝謝你，先生。任何現場使用這個例子？ – 2012-07-29 09:57:11

可以使用手持特定樣式表屬性media="screen and (max-device-width: /* whatever */)"這樣的轉換相同的塊：

<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">

或者你可以使用@media樣式表內

@media only screen and (max-device-width: /* whatever */) { 
    /* Styles goes here */ 
}

Media Info

PS我剛剛看到了的來源10，他們正在使用ipad.css樣式表的樣式表屬性，看看。

來源

2012-07-29 07:39:11

我已經在這樣做。我的問題是。我應該使用表格來建立這些列表項目，還是應該單獨構建它們 – 2012-07-29 08:14:41

'我可以將當前表格轉換爲移動視圖嗎？「是的，您當然可以，您需要在手持式特定樣式表中給它們單獨的樣式，您可以閱讀先生Jukka K. Korpela的回答 – 2012-07-29 08:17:00

很酷我做到了。任何想法如何我可以整個列表作爲一個整體作爲一個塊可點擊？ – 2012-07-29 10:34:20

如果CSS3可接受，您可以使用media queries爲不同的尺寸和設備創建不同的樣式。您可以通過這種方式創建令人難以置信的動態網站。

來源

2012-07-29 08:00:23

通常，表格數據可以將表格行拉伸到不希望的長度，超出表格行的範圍。在處理移動設備時，您將擁有有限的px。您可以創建現有CSS樣式表的副本，並稍微編輯它，爲您的網站切換到移動版時設置表格的最小/最大寬度。

max-width: __px; 
min-width: __px; 
etc.

或者你可以調用JS功能上切換到移動網站的情況下，追加CSS

$('#tableName').css('max-width', '150px'); 
$('#tableName').append(div).css('max-width', '150px');

的JS版本可以是有點棘手得走了，我認爲你應該在CSS上設置限制。

來源

2012-07-29 08:18:54

我可以建議的媒體查詢是響應式設計的最佳解決方案。

讓我給你一個基於頁面寬度的responnes的簡單代碼。

在代碼中，我已經使用媒體查詢來改變基於瀏覽器寬度的para顏色。您可以改爲使用style = display：none隱藏或根據瀏覽器寬度更改內容的大小。

<html> 
<head> 
<style> 
@media (max-width: 600px) { 
    #p1{ 
    color:red; 
    } 
} 
@media (max-width: 400px) { 
    #p1{ 
    color:blue; 
    } 
} 
</style> 

</head> 
<body> 
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p> 

</body> 
</html>

你可以找到更多的教程簡單here

來源

2014-02-12 07:49:33

響應式設計，以顯示數據列表

回答

相關問題