响应式设计，以显示数据列表

问题描述：

我想在桌面版本的网站上使用表格显示数据列表中的数据。我想为移动网络缩小相同的内容。我应该使用单独的HTML块还是可以将当前表格转换为移动视图。响应式设计，以显示数据列表

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

我喜欢移动

enter image description here

更新以下列表视图我根据答案修改的代码。任何想法如何我可以整个列表作为一个整体作为一个块可点击？

答

您可以将HTML table转换为不同的呈现方式，例如，设置

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

这将导致完全垂直的表示。

当然细节取决于标记和所需的渲染。

哇之间的链接的区域。从来没有想过这个。谢谢你，先生。任何现场使用这个例子？ – 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 08:14:41

'我可以将当前表格转换为移动视图吗？“是的，您当然可以，您需要在手持式特定样式表中给它们单独的样式，您可以阅读先生Jukka K. Korpela的回答 – 2012-07-29 08:17:00

很酷我做到了。任何想法如何我可以整个列表作为一个整体作为一个块可点击？ – 2012-07-29 10:34:20

答

如果CSS3可接受，您可以使用media queries为不同的尺寸和设备创建不同的样式。您可以通过这种方式创建令人难以置信的动态网站。

答

通常，表格数据可以将表格行拉伸到不希望的长度，超出表格行的范围。在处理移动设备时，您将拥有有限的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上设置限制。

答

我可以建议的媒体查询是响应式设计的最佳解决方案。

让我给你一个基于页面宽度的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

响应式设计，以显示数据列表

相关推荐