css - 使用半响应式网页设计，选择什么网格？

Question

我有一个关于将现有(非响应式)网站转换为半响应式网站的问题。

事实:

• 我们有一个单独的手机网站，所以这里没有问题。

• 我们的桌面站点宽度为 978px，对于 978px 及以上的屏幕，这不会改变。

• 但是，从 768px 到 977px 的平板电脑将需要对布局进行一些自定义。

因此，我们的网站需要成为“半响应式”以适应常见平板电脑的 768px 断点、800px 断点等。

我们的网站几乎在所有地方都使用像素宽度。我们正在研究:

a) 将我们的容器转换为基于网格的版本，其中我们使用 12 列。这仍然是我们自己的编码方法，而不是依赖于像 Foundation 或 Bootstrap 这样的框架。然而，概念将是使用与 Foundation 相似的百分比(例如，12 列网格上的大 6 将是宽度:50%)，然后我们将从那里自定义填充等。

b) 或者我们使用 10 列网格，使用起来更有意义，因为数字要简单得多，例如large-1 的宽度为 10%，large-2(十个 block 中的两个)的宽度为 20%，依此类推。

我想知道是否有任何特定原因需要使用 12 或 10 列网格？我们没有特定的 12 或 10 列设计，因为我们正在改变现有网站，对页眉/页脚进行一些重新设计。我知道 12 列网格是标准的，但我从未听说过 10 列网格，但我很好奇您是否会选择上面的 a) 而不是 b)？如果 10 列更有意义并且对边距/填充和让列完全适合 100% 宽度的麻烦更少，我是否有任何令人信服的理由选择 12 列网格？

我们也在考虑http://www.responsivegridsystem.com/这是一种不同的更简单的方法，但我认为这与上面的方法完全不同，所以我们将单独进行试验。

如有任何建议，我们将不胜感激。

非常感谢

Answer 1

网格系统通常基于 12 列网格，因为 12 可以被 2、3、4 和 6 整除。如果您使用 10 列网格系统，您可以轻松设置 2 列布局，但三列会困难得多。 12 列系统使 2 列、3 列、4 列和 6 列布局的数学计算变得非常容易。

由于这是一个更加自定义的应用程序，我建议不要将其视为响应式网格选择，而是将哪种响应式方法最适合您的约束集。

个人推荐Bootstrap的网格系统，因为它非常易于使用并且可以快速上手。