针对不同的设备尺寸显示不同的 table/grid 布局

Question

我正在创建一个网站，我需要在其中显示一些内容 {image + text}。我需要它们并排显示以适应 PC 上的显示，并在移动设备上显示从下到下的顺序。
在图像中，左侧显示了移动设备上的预期输出，

PC 右侧。

我可以通过检测 user agents {if its a mobile or PC} 在每个 TR 中放置一个 TD，但我需要使用 CSS 的更有效的解决方案。 DIV 也可以代替 Table 布局。

Answer 1

您应该做的就是在 CSS 中为网站的 PC 版本设置默认样式，然后根据需要为移动版本重做另一个样式，但这次在这个模板中：

 @media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}

PS：请务必为您想要的设备指定正确的最大宽度。

Answer 2

有很多方法可以实现这一点，我不喜欢使用表格，而使用您提到的 div 是一个选项。

使用 bootstrap grid system 方法是我想到的一个选项。

我会这样做：

在父容器中将您的块按 2 个分组，并将它们默认设置为 50% 宽度，并在使用响应式查询的较小屏幕上将它们设置为 100% 宽度。

这里是我所说内容的简化标记：

<div class="row">
  <div class="content-block">1</div>
  <div class="content-block">2</div>
</div>

<div class="row">
  <div class="content-block">3</div>
  <div class="content-block">4</div>
</div>

.content-block {
  width:50%;
  float:left;
}

@media only screen and (max-width: 767px) {
  .content-block {
    width:100%;
  }
}

这里有一个更详细的工作示例：

fiddle

Answer 3

最好的解决方案之一是网格系统。您可以参考以下链接。

Bootstrap 是最好的前端开发框架之一。

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

针对不同的设备尺寸显示不同的 table/grid 布局

Display Different table/grid layout for different device sizes

html

css

responsive-design

css-tables