显示数据列表的响应式设计
Posted
技术标签:
【中文标题】显示数据列表的响应式设计【英文标题】：Responsive Design to display List of Data 【发布时间】：2012-07-27 07:05:34 【问题描述】：我正在尝试使用表格在桌面版网站的表格中显示数据列表。我想为移动网络压缩同样的内容。我应该使用单独的 html 块还是可以将当前表格转换为移动视图。
http://play.mink7.com/h/startupsradar/pending.html
我喜欢移动设备上的以下列表视图
更新 我根据答案修改了代码。知道如何使整个列表像一个块一样可点击吗？
【问题讨论】：
【参考方案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找到更多教程
【讨论】：
以上是关于显示数据列表的响应式设计的主要内容，如果未能解决你的问题，请参考以下文章