0

我有一个两列的表，看起来像这样。

在此处输入图像描述

这就是我所需要的，它涵盖了大约 1000 像素的可用空间。但是我的问题是当我在移动设备 iphone 上查看它时。桌子并没有在每个项目后打破，而是挤压桌子以适应屏幕，这就是我想象的配置。什么是最好的方法来代替挤压桌子以适应使桌子改变其布局。我唯一能想到的是检查设备类型并通过javascript创建表格，如果不是移动设备，则定期将表格更改为具有多行的一列（如果是移动设备）。

这是最好的方法吗？

4

3 回答 3

3

首先停止使用表格进行布局，使用新的 HTML5 语义标签，这不仅可以解决这些问题，还可以帮助您进行 SEO，并使用纯 CSS 的力量，学习 CSS 定位、浮动以及如何设计响应式布局, 如果您想要不同设备的不同布局而不是使用@media queries

媒体查询参考

于 2013-01-29T19:36:12.897 回答
0

您需要使用媒体查询。

阅读本文以了解如何操作。

媒体查询示例：

@media only screen and (max-device-width: 480px) {

}
于 2013-01-29T19:36:24.997 回答
0

最好的方法是根本不使用桌子。一般来说，表格不太容易被“响应”。

您应该考虑使用两个 div 并使用媒体查询来定位 div 以使其看起来不错。我建议你看看 twitter 是如何做到的。你可以在这里找到他们的响应式网格

我读过的关于该主题的更好的文章之一可以在css 技巧中找到

于 2013-01-29T19:36:25.050 回答