2

有没有办法使用“传统”网格布局根据屏幕宽度调整列数？

我正在使用许多响应式流体网格系统之一 - 例如来自 zurb 基础的网格（使用 12 列）。

假设我在页面上创建了三列：

<div class="row">
    <div class="four columns"></div>
    <div class="four columns"></div>
    <div class="four columns"></div>
</div>

假设在某个断点（屏幕宽度），我想在四列而不是三列中显示我的内容。

<div class="row">
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
</div>

更大的屏幕可能会更多，而更小的屏幕可能只有两列。

问题是 - 使用这个网格（或其他具有类似标记的网格），我必须更改标记 - 据我所知，我无法使用 css 媒体查询调整列数。

有什么方法可以轻松更改列数？也许使用javascript？

我确信一定已经有一个可以通过这种方式自定义的网格系统，但我还没有找到。

4

4 回答 4

2

您可能想看看语义网格。原因是所有内容都在 css 文件中定义，而不是标记。它确实使用 LESS，所以这对您来说可能是个问题。

此外，您可以按百分比制作网格，这将解决

有没有办法使用“传统”网格布局根据屏幕宽度调整列数？

即使这不是您要求解决的方法，我相信它会为您解决问题。

您还说要使用多少列。

于 2012-12-11T13:23:30.003 回答
0

试试 skeljs 太棒了。它会做你想要的。

于 2014-05-20T23:30:31.820 回答
0

查看 Foundation 中的块网格：http: //foundation.zurb.com/docs/components/block_grid.html

于 2014-04-10T16:20:59.060 回答
-1

http://gridsetapp.com正是您正在寻找的（我知道这是两年前的事，但也许其他人需要相同的解决方案）。

于 2015-02-17T12:53:27.673 回答