1

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

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

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

在此处输入图像描述

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

4

5 回答 5

3

您可以使用手持设备特定的样式表属性转换相同的块，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 */
}

媒体信息

PS我刚刚看到nike.com的来源，他们正在使用ipad.css样式表的样式表属性，看看。

于 2012-07-29T07:39:11.320 回答
3

您可以将 HTMLtable转换为不同的渲染，例如设置

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

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

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

于 2012-07-29T08:02:39.027 回答
1

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

于 2012-07-29T08:00:23.763 回答
1

通常，表格数据可以将表格行拉伸到不希望的长度，超出表格行的范围。在处理移动设备时，您的 px 将受到限制。您可以创建现有 CSS 样式表的副本并稍微编辑它，为您的网站切换到移动设备时的表格设置最小/最大宽度。 

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

或者，您可以在切换到移动站点附加 CSS 时调用 JS 函数

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

JS 版本可能有点棘手，我认为你应该对 CSS 设置限制。

于 2012-07-29T08:18:54.883 回答
0

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

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

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

你可以在这里找到更多教程

于 2014-02-12T07:49:33.463 回答