显示数据列表的响应式设计答案

【问题标题】：Responsive Design to display List of Data显示数据列表的响应式设计
【发布时间】：2012-07-27 07:05:34
【问题描述】：

我正在尝试使用表格在桌面版网站的表格中显示数据列表。我想为移动网络压缩同样的内容。我应该使用单独的 html 块还是可以将当前表格转换为移动视图。

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

我喜欢移动设备上的以下列表视图

更新我根据答案修改了代码。知道如何使整个列表像一个块一样可点击吗？

【问题讨论】：

标签： html css responsive-design html-table

【解决方案1】：

您可以像这样使用手持设备特定样式表属性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

P.S 我刚刚看到nike.com的来源，他们使用的是 ipad.css 样式表的样式表属性，看看。

【讨论】：

我已经在这样做了。我的问题是。我应该使用表格来构建这些列表项还是应该单独构建它们
can i convert the present tables for the mobile view. 是的，当然可以，您需要在手持特定样式表中为它们提供单独的样式，您可以阅读 Jukka K. Korpela 爵士的回答
酷我做到了。知道如何使整个列表像一个块一样可点击吗？
你的意思是你在手持设备上的整个布局应该作为链接？
不是整个布局。但整排。现在只有图像和 h2 和 p 标签充当链接。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

这将导致完全垂直的呈现。

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

【讨论】：

哇。从来没想过。谢谢你，先生。任何使用它的活生生的例子？

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

让我给你一个简单的基于页面宽度的响应代码。

在代码中，我使用媒体查询根据浏览器宽度更改 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找到更多教程

【讨论】：