2

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

事实：

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

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

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

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

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

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

b) 或者我们使用 10 列的网格，这样使用起来更有意义，因为数字要简单得多，例如 large-1 的宽度为 10%，large-2（十分之二）的宽度为 20%，等等。

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

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

任何建议将不胜感激。

非常感谢

4

1 回答 1

2

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

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

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

于 2013-05-07T14:36:26.800 回答